Änderung in $ document.on ('Klick') nicht in der Ansicht

Question

Ich habe eine Winkelrichtlinie ngx-notifications, es sitzt in einem Controller MenuBarController.

Ansicht

<div class="row" ng-controller="MenuBarController"> 
... 
    <span ng-click="ShowNotifications()">click me</span> 
    <div ng-show="NotificationsVisible" ngx-notifications="NotificationsVisible"> 

-Controller

$scope.NotificationsVisible = false; 

function ShowNotifications(){ 
    $scope.NotificationsVisible = !$scope.NotificationsVisible; 
} 


setInterval(function(){ 
    console.log($scope.NotificationsVisible); 
},1000); 

Richtlinie

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; 

     } 
     }); 

    } 
    } 
} 

Die span[ng-click] schaltet die Sichtbarkeit meiner Benachrichtigungsbox, aber aus irgendeinem Grund, wenn meine directive ändert es über $document.on('click') Winkel nicht die Änderung abholen, trotz meiner setTimeout in der controller zeigt, dass der Wert geändert hat. Warum ist das?

Ich kann keinen separaten Bereich zwischen meinem Controller und meiner Direktive erstellen, ich muss nur diese zusätzliche Funktionalität hinzufügen.

Answer 1

Wie ich aus irgendeinem Grunde vermuten das $document::on Verfahren nicht Teil der Winkel verdauen ist, das Hinzufügen $scope.$apply gearbeitet, aber das ist wirklich nicht sinnvoll (ich nie Winkel Code links um das Modell zu ändern):

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