$ document.on（ 'クリック'）の変更がビューに反映されていません

Question

私は角度指示文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')経由で変更された場合、controllerのsetTimeoutに値が変更されたことが示されているにもかかわらず、変更が反映されません。どうしてこれなの？

コントローラと私のディレクティブの間に別のスコープを作成することはできません。この追加機能を追加するだけです。

Answer 1

私が疑われるとして、$document::on方法は、角ダイジェストの一部ではないいくつかの理由で、$scope.$applyが働い加えるが、これは本当に意味がないため（私はモデルを変更するには、角度コードを残したことはありません）：

$document.bind("click",function ($e) { 
    if($scope[key] && !$elem[0].contains($e.target)){ 
    $scope.$apply(function() { 
     $scope[key] = false; 
    }); 
    } 
});