2014-10-10 105 views
1

我有一個按鈕,單擊時顯示一個窗口,並在按鈕被再次點擊時隱藏它。即使點擊頁面中的任何其他位置,我也希望窗口關閉。

這是我的代碼:

<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();} 

    } 

什麼是做到這一點的正確方法任何人都可以請指導我在正確的方向。謝謝。

回答

0

試試這個,改變你的控制器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(); 
      } 
} 
0

我不知道你想實現被點擊的內容以後有什麼,但你可以$watchcontent value在控制器和運行一些操作時的內容變化值

請參考下面的腳本

var app = angular.module('app', []); 
 

 
app.controller('fCtrl', function($scope) { 
 

 
    $scope.$watch('content', function(value) { 
 

 
    if (value) { 
 

 
     $scope.contentClick = 1; 
 
    } else { 
 
     $scope.contentClick = 0; 
 
    } 
 

 

 
    }) 
 

 
});
.open { 
 
    color: red ;opacity: 0.5; 
 
}
<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>