Вызов функции по нажатию кнопки в $ scope - PullRequest
Новая
       12

Вызов функции по нажатию кнопки в $ scope

0 голосов
/ 16 апреля 2019

У меня есть всплывающее окно Uib DatePicker. Что мне нужно сделать, так это настроить ее так, чтобы во всплывающем окне была кнопка, для которой мне нужно либо ограничить выбор даты выходными, либо разрешить выбор любой даты.

В рамках этого упражнения мне нужно иметь возможность вызывать событие click при нажатии кнопки внутри пользовательского шаблона для средства выбора даты uib. Почему функция clickme не вызывается в области видимости? 

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clickme = function(){
    console.info("log me");
  }

  $scope.open = function($event) {
    $scope.status.opened = true;
  };

  $scope.setDate = function(year, month, day) {
    $scope.dt = new Date(year, month, day);
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];

  $scope.status = {
    opened: false
  };
});
.popup-header {
  text-align: center;
  font-weight: bold;
  padding: 10px;
}
<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div ng-controller="DatepickerDemoCtrl">
    <div class="row">
      <div class="col-xs-offset-3 col-xs-6 col-md-3">
        <h4 class="text-center">Date picker Popup</h4>
        <p class="input-group">
          <input type="text" class="form-control date-picker" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"
          close-text="Close" />
          <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
        </p>

        <!-- Overriding code -->

        <script id="template/datepicker/popup.html" type="text/ng-template">
          <ul class="uib-datepicker-popup dropdown-menu" dropdown-nested ng-if="isOpen" style="display: block" ng-style="{top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
            <!-- Extra code -->

            <div class="popup-header">This is a button?
              <button ng-click="clickme();">click me</div>

            <!-- Extra code -->
            <li ng-transclude></li>
            <li ng-if="showButtonBar" style="padding:10px 9px 2px" class="uib-button-bar">
              <span class="btn-group pull-left">
			<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today')" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
			<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null)">{{ getText('clear') }}</button>
		</span>
              <button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close()">{{ getText('close') }}</button>
            </li>
          </ul>
        </script>

        <!-- Overriding code -->
      </div>
    </div>

  </div>
</body>

</html>
...