Angular 1.5: директива, использующая функцию ссылки, не будет обновлять родительскую область через привязки

0

Я создаю директиву для переноса DateRangePicker. Я использую функцию ссылки для создания экземпляра daterangepicker, и я добавляю метод обратного вызова на контроллере директивы для обновления переменных области. Проблема в том, что, похоже, эти переменные не обновляются. Я сделал PLNKR, чтобы продемонстрировать, что у меня есть проблема. Вы можете увидеть, что startDate и endDate обновляются с помощью кнопок. И в разделе console отладки вы увидите, что вызывается метод обратного вызова. Он просто не обновляет родительскую область. И вы можете сказать, что оно связано с односторонним движением, потому что label отображается в виде Schedule.

http://plnkr.co/edit/s8sB95YwXSD6oTo6b1MI?p=preview

var app = angular.module('demo', ['angularMoment']);

app.controller('Home', function ($scope) {
  $scope.startDate = moment();
  $scope.endDate = moment();
  $scope.updateStart = function () {
    $scope.startDate = moment();
  };
  $scope.updateEnd = function () {
    $scope.endDate = moment();
  };
});

app.directive('dateInput', function () {
  return {
    resolve: 'E',
    templateUrl: 'dateInput.html',
    scope: {
      dateStart: '=',
      dateEnd: '=',
      label: '@'
    },
    controller: function ($scope) {
      var self = this;
      self.update = function (start, end, label) {
        console.debug('DirectiveCtrl.update: ' + start.format('MM-DD-YYYY') + ' - ' + end.format('MM-DD-YYYY'));
        $scope.dateStart = start;
        $scope.dateEnd = end;
      };
    },
    link: function (scope, element, attrs, controller) {
      element.children('div').children('input').daterangepicker({
        timePicker: true,
        timePickerIncrement: 5,
        locale: {
          format: 'MM/DD/YYYY h:mm A'
        }
      }, controller.update);
    }
  }
});

HTML:

<div ng-controller="Home">
  <p>
    Start Date: {{startDate | amParse: 'MM-DD-YYYY'}}
    <br />
    End Date: {{endDate | amParse: 'MM-DD-YYYY' }}
  </p>
  <date-input date-start="startDate" date-end="endDate" label="Schedule"></date-input>
  <button type="button" ng-click="updateStart()">Update Start</button>
  <button type="button" ng-click="updateEnd()">Update End</button>
</div>
  • 0
    camelCase необходим для директив. dateStart и dateEnd становятся date-start и date-end соответственно.
  • 0
    @MuliYulzary Спасибо, я обновил код, но проблема все еще существует.
Показать ещё 3 комментария
Теги:
angular-directive

1 ответ

1
Лучший ответ

Вам нужно указать угловую модель, которая изменилась, поэтому вызовите $scope.$apply() в вашей функции обновления после того, как вы закончите обновление vars.

  • 1
    Спасибо еще раз за помощь.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню