$scope.$watch не перехватывает значение, измененное директивой

Question

Моя директива фокусирует мой диапазон и присваивает логическому значению, т.е. focusToSpan, значение true, когда я нажимаю shifttab, однако это изменение не отражается ни в моем контроллере, ни в шаблоне. Я даже проверил с помощью $ scope. $ Watch переменной focusToSpan, как показано ниже

директива

(function() {
    'use strict';
    angular.module("my.page").directive('getFocusToSpan', function() {
        return {
            link: function(scope, elem, attr, ctrl) {
                elem.bind("keydown keypress", function(event) {
                    if (event.which === 16) {
                        $('.iconclass').attr("tabIndex", -1).focus();
                        scope.focusToSpan = true;
                    }
                });
            }
        };

    });

})();

контроллер

     $scope.$watch('focusToSpan', function(newValue) {
     if (angular.isDefined(newValue)) {

     alert(newValue);
     }
     });

который не вызывается. Могу ли я знать, как изменение, внесенное в переменную контроллера в директиве, будет отражено в контроллере и в шаблоне. Спасибо, Баладжи.

Answer 1

Вне углового контекста вы манипулируете областью действия / привязкой, которая не обновляется. Для обновления привязки необходимо запустить цикл дайджеста, чтобы обновить все привязки уровня области действия.

Вот в вашем случае вы обновляете угловой scope переменная из пользовательского события, поэтому вам нужно запустить цикл дайджеста вручную, выполнив $apply() метод по объему

Код

elem.bind("keydown keypress", function(event) {
    if (event.which === 16) {
       $('.iconclass').attr("tabIndex", -1).focus();
       scope.focusToSpan = true;
       scope.$apply();
    }
});