У меня есть угловая директива ngx-notifications
, она находится внутри контроллера MenuBarController
.
Посмотреть
<div class="row" ng-controller="MenuBarController">
...
<span ng-click="ShowNotifications()">click me</span>
<div ng-show="NotificationsVisible" ngx-notifications="NotificationsVisible">
контроллер
$scope.NotificationsVisible = false;
function ShowNotifications(){
$scope.NotificationsVisible = !$scope.NotificationsVisible;
}
setInterval(function(){
console.log($scope.NotificationsVisible);
},1000);
директива
angular.module('app').directive('ngxNotifications', NotificationsDirective);
NotificationsDirective.$inject = ['$document'];
function NotificationsDirective($document) {
return {
restrict: "A",
scope: false,
link: function ($scope, $elem, $attr) {
var key = $attr.ngxNotifications;
$document.on("click",function ($e) {
if(!$elem[0].contains($e.target)){
console.log($scope,key); // logs correct scope and key
//neither of the two following lines are reflected in the view
$scope[key] = false;
$scope.NotificationsVisible = false;
}
});
}
}
}
span[ng-click]
переключает видимость моего окна уведомлений, но по какой-то причине, когда моя directive
меняет его с помощью $document.on('click')
угловая не подбирает изменения, несмотря на то, что мой setTimeout
в controller
показывает, что значение HAS изменилось. Почему это?
Я не могу создать отдельную область действия между моим контроллером и моей директивой, мне просто нужно добавить эту дополнительную функциональность.
Как я подозревал, по какой-то причине метод $document::on
не является частью углового дайджеста, добавив $scope.$apply
работал, но это не имеет смысла (я никогда не оставлял угловой код для изменения модели):
$document.bind("click",function ($e) {
if($scope[key] && !$elem[0].contains($e.target)){
$scope.$apply(function () {
$scope[key] = false;
});
}
});