Question

我有一个按钮，当点击它时会显示一个窗口，并在再次点击该按钮时隐藏它。即使页面中的任何其他位置被点击，我也希望窗口关闭。

这是我的代码：

<a class="btn dropdown-toggle multiselect-btn" ng-click="content=!content;contentClick=true">

//The div to show hide
<div ng-class="{'open':content}" > div content </div>

我在控制器中的点击代码上编写了以下窗口，但它没有工作..

$window.onclick = function () {
    if($scope.contentClick){
    $scope.contentClick=0;  
    }
    else{$scope.content=false;
    $scope.$apply();}

    }

这样做的正确方法是什么？任何人都可以指导我正确的方向。谢谢。

Answer 1

试试这个，更改您的控制器ID：

window.onclick = function () {
            var scope = angular.element(document.getElementById('controller_id')).scope();
            if(scope.contentClick){
                scope.contentClick=0;  
            }
            else{
               scope.content=false;
               scope.$apply();
            }
}

Answer 2

我不确定在点击内容后你想要达到什么目的，但你可以在控制器中$watch content value并在内容更改值时运行一些操作

请参阅下面的脚本

＆＃13;

var app = angular.module('app', []);

app.controller('fCtrl', function($scope) {

  $scope.$watch('content', function(value) {

    if (value) {

      $scope.contentClick = 1;
    } else {
      $scope.contentClick = 0;
    }


  })

});

＆＃13;

.open {
  color: red ;opacity: 0.5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">

    <a class="btn dropdown-toggle multiselect-btn" ng-click="content=!content;contentClick=true">Click me </a>
    <hr/>//The div to show hide
    <div ng-class="{'open':content}">div content {{contentClick}}
    </div>
  </div>
</div>

＆＃13;

窗口onclick上的AngularJS $范围变量

2 个答案: