ng-show值不會通過點擊ng單擊內部進行更新

Question

我有這個問題，我試圖使用ng-show做一個下拉菜單。我的HTML看起來像：

<div class="dropdown" ng-mouseover="test()" ng-mouseleave="test2()" ng-click="test3()"> 
     <span>{{dropDownTimeEst}}</span> 
     <i class="fa fa-caret-down bron-caret" aria-hidden="true"></i> 
     <div class="dropdown-content" ng-show="showDropwDownTime"> 
      <a ng-repeat="item in times" ng-click="changeTimeEst(item)">{{item}}</a> 
     </div> 
</div> 

的一點是，每當我懸停或點擊下拉框它讓我看到下拉菜單的內容。我設法成功打開下拉內容，但是當點擊項目並觸發changeTimeEst函數時，ng-show不在範圍內更新。

控制器代碼：

$scope.test = function(){ 
    $scope.showDropwDownTime = true; 
} 
$scope.test2 = function(){ 
    $scope.showDropwDownTime = false; 
} 
$scope.test3 = function(){ 
    $scope.showDropwDownTime = true; 
} 
$scope.changeTimeEst = function(item){ 
    $scope.dropDownTimeEst = item; 
    $scope.showDropDownTime = false; //This here does not do anything, but it should close the dropdown-content 

任何人都不會有想法如何解決這個問題？

Answer 1

您好我想你的點擊事件被傳播到外面股利。所以，你應該停止傳播這個事件。 試試這個：

<div class="dropdown" ng-mouseover="test()" ng-mouseleave="test2()" ng-click="test3()"> 
     <span>{{dropDownTimeEst}}</span> 
     <i class="fa fa-caret-down bron-caret" aria-hidden="true"></i> 
     <div class="dropdown-content" ng-show="showDropwDownTime"> 
      <a ng-repeat="item in times" ng-click="changeTimeEst(item); $event.stopPropagation();">{{item}}</a> 
     </div> 
</div> 

如，你可以看到我已經加入$ event.stopPropagation（）在你的錨單擊事件。
希望，這能解決你的問題:)謝謝

Answer 2

在我看來，您在視圖的ng-show中拼錯了變量。無論是或者你已經在你的控制器的$scope.changeTimeEst()函數中拼錯了它。我不確定你想要哪一個。

您有：

ng-show="showDropwDownTime" 

我想你想：

ng-show="showDropDownTime" 

但是，如果你剛剛到StackOverflow上覆制你的代碼時出現一個錯字，那麼你最有可能需要不同的東西。在這種情況下，我建議使用$scope.$apply()觸發一個摘要循環，並告訴視圖你已經更新了控制器範圍內的一個變量。

例如：

$scope.changeTimeEst = function(item) { 
    $scope.dropDownTimeEst = item; 
    $scope.showDropDownTime = false; 
    $scope.$apply(); // This should update your view 
}