Question

我正在创建一个包装DateRangePicker的指令。我正在使用link函数来实例化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>

Answer 1

您需要告知角度模型已更改，因此在您更新vars后，请在更新功能中调用$scope.$apply()。

Angular 1.5：使用链接功能的指令不会通过绑定更新父作用域

1 个答案: