Совместное использование контроллера и директивы в AngularJS

я создал директиву для переноса плагина jQuery, и я передаю объект конфигурации для плагина из контроллера в директиву. (работает)

В объекте конфигурации есть обратный вызов, который я хочу вызвать на событие. (работает)

В обратном вызове я хочу изменить свойство на контроллереs $ scope, котораяне работает, Angular не распознает, что свойство по какой-то причине изменилось, что заставляет меня полагать, что область действия $ в обратном вызове отличается от контроллера 's $ scope. Моя проблема в том, что я просто нет почему.

Кто-нибудь может указать мне правильное направление?

Нажмите здесь для 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.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>
    

Ответы на вопрос(2)

Ваш ответ на вопрос