Изменение в $ document.on ('click') не отражено в представлении

0

У меня есть угловая директива 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 изменилось. Почему это?

Я не могу создать отдельную область действия между моим контроллером и моей директивой, мне просто нужно добавить эту дополнительную функциональность.

  • 0
    Если вы видите этот вопрос, ответ на stackoverflow.com/questions/24521300/… несколько отвечает на происходящее (я не могу пометить как дубликат, потому что другой ответ не был принят)
Теги:
javascript-events
angularjs-scope
angularjs-directive

1 ответ

0
Лучший ответ

Как я подозревал, по какой-то причине метод $document::on не является частью углового дайджеста, добавив $scope.$apply работал, но это не имеет смысла (я никогда не оставлял угловой код для изменения модели):

$document.bind("click",function ($e) {
  if($scope[key] && !$elem[0].contains($e.target)){
    $scope.$apply(function () {
      $scope[key] = false;
    });
  }
});
  • 0
    Я думаю, что ваше оригинальное решение не работает из-за $ document.bind. Это не часть угловой петли дайджеста. Затем вы вызываете его с помощью $ scope.apply ().
  • 1
    да, я прочитал это после публикации (сделал быстрый Google, как только я выяснил, что происходит). К сожалению, я ожидаю, что нативный угловой код будет работать в цикле дайджеста.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню