Совместное использование контроллера и директивы в AngularJS
я создал директиву для переноса плагина jQuery, и я передаю объект конфигурации для плагина из контроллера в директиву. (работает)
В объекте конфигурации есть обратный вызов, который я хочу вызвать на событие. (работает)
В обратном вызове я хочу изменить свойство на контроллереs $ scope, котораяне работает, Angular не распознает, что свойство по какой-то причине изменилось, что заставляет меня полагать, что область действия $ в обратном вызове отличается от контроллера 's $ scope. Моя проблема в том, что я просто нет почему.
Кто-нибудь может указать мне правильное направление?
app.js
var app = angular.module('app', [])
.directive('datepicker', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
// Uncommenting the line below causes
// the "date changed!" text to appear,
// as I expect it would.
// scope.dateChanged = true;
var dateInput = angular.element('.datepicker')
dateInput.datepicker(scope.datepickerOpts);
// The datepicker fires a changeDate event
// when a date is chosen. I want to execute the
// callback defined in a controller.
// ---
// PROBLEM:
// Angular does not recognize that $scope.dateChanged
// is changed in the callback. The view does not update.
dateInput.bind('changeDate', scope.onDateChange);
}
};
});
var myModule = angular.module('myModule', ['app'])
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.dateChanged = false;
$scope.datepickerOpts = {
autoclose: true,
format: 'mm-dd-yyyy'
};
$scope.onDateChange = function () {
alert('onDateChange called!');
// ------------------
// PROBLEM AREA:
// This doesnt cause the "date changed!" text to show.
// ------------------
$scope.dateChanged = true;
setTimeout(function () {
$scope.dateChanged = false;
}, 5000);
};
}]);
HTML
<p ng-show="dateChanged">date changed!</p>