Angular 1.5:使用 link 函数的指令不会通过绑定更新父作用域

Angular 1.5: Directive using link function won't update the parent scope through the bindings

我正在创建一个指令来包装 DateRangePicker。我正在使用 link 函数来实例化 daterangepicker,并在指令的控制器上附加一个回调方法来更新范围变量。问题是它似乎没有更新这些变量。我做了一个 PLNKR 来证明我遇到的问题。您可以使用按钮看到 startDateendDate 更新正常。在 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>

您需要告诉 angular 模型已更改,因此在更新完变量后在更新函数中调用 $scope.$apply()