如果在angularjs中單擊div，如何隱藏div

Question

對於通知，我希望我的div如果在其代碼外單擊，則隱藏起來。

<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>

控制器中的js代碼是

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

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

如果我不使用“ event.stopPropagation（）;” 然后在屏幕上的任意位置以及通知div上單擊時div隱藏

Answer 1

首先，您需要注入窗口服務。 您應該以這種方式進行操作，以便可以在測試中對其進行模擬。

另外， 更新 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();
    }
  }

}]);