javascript - 如果在 angularjs 中的 div 外部单击，如何隐藏 div

Question

For the notifications I want that my div will be hidden if clicked outside of it plunker code link the html code is

<div ng-hide="notification" ng-click="notifications($event);"><i class="fa fa-bell" aria-hidden="true"></i></div>
<div ng-hide="notifyData">
    <ul>
        <li ng-repeat="noti in newNotificationarray">
            <div class="notifymsg">{{noti.msg}}</div>
            <div class="notifytitle">
                <a href="#">{{noti.title}}</a>
            </div>
            <div class="notifyName">{{noti.cName}}</div>
        </li>
    </ul>                                
</div>

the js code in controller is

$scope.notifications=function(event){
    $scope.notifyData=!($scope.notifyData);          
    event.stopPropagation();
};

window.onclick = function(){
    if ($scope.notifyData) {
        $scope.notifyData=false;          
        $scope.$apply();
    }
};

If I do it without using "event.stopPropagation();" then the div hide when clicked anywhere on the screen and also on the notification div

Answer 1

首先，您需要注入(inject)窗口服务。您应该这样做，以便可以在您的测试中模拟它。

此外，更新 window 的 onclick 处理程序中的逻辑。

var app = angular.module("myapp", []);
app.controller('mycontroller', ['$scope', '$window', function($scope, $window) {
  ...
  $window.onclick = function(event) {
    if (!$scope.notifyData) {
      $scope.notifyData = true;
      $scope.$apply();
    }
  }

}]);