Я создаю директиву для переноса 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>
Вам нужно указать угловую модель, которая изменилась, поэтому вызовите $scope.$apply()
в вашей функции обновления после того, как вы закончите обновление vars.
dateStart
иdateEnd
становятсяdate-start
иdate-end
соответственно.