ng-show 值不会通过单击 ng-click 在内部更新

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

在我看来，您在视图 ng-show 中拼错了变量。或者你在控制器的 $scope.changeTimeEst() 函数中拼错了它。我不确定你想要哪一个。

你有：

ng-show="showDropwDownTime"

我想你想要：

ng-show="showDropDownTime"

但是，如果您只是在将代码复制到 Whosebug 时输入错误，那么您很可能需要一些不同的东西。在这种情况下，我建议使用 $scope.$apply() 触发摘要循环并告诉视图您已经更新了控制器范围内的变量。

例如：

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

Answer 2

您好，我认为您的点击事件正在传播到外部 div。因此，您应该停止传播此事件。试试这个：

<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()。
希望，这可以解决您的问题:) 谢谢

ng-show 值不会通过单击 ng-click 在内部更新

ng-show value will not update inside itself by clicking ng-click

javascript

html

angularjs

dropdown

ng-show