Edit Question - KnowledgeHub

Title Body

I've created a directive to wrap a jQuery plugin, and I pass a config object for the plugin from the controller to the directive. (works) In the config object is a callback that I want to call on an event. (works) In the callback, I want to modify a property on the controller's $scope, which does not work . Angular does not recognize that the property has changed for some reason, which leads me to believe that the $scope in the callback is different than the controller's $scope. My problem is I just don't why. Can anybody point me in the right direction? Click here for Fiddle 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.onDateChang

Tags (comma-separated) Cancel