当ng-click位于div内部时，ng-show不会更新

Question

我有一个带有ng-show的DIV。

- 当我在DIV外部运行ng-click时，它能够正常工作并且我可以隐藏它。 - 当我在DIV内部的元素上运行ng-click时，它不起作用。虽然我可以看到变量在console.log中被改变，但是视图不会更新。 - 我尝试使用$scope.$apply()，但会出现错误，说它已经运行$apply()。

控制器的部分内容:

    $scope.selectedActivity = {
        "dayNr": 0,
        "actNr": 0
    };

    $scope.resetSelectedActivity = function () {
        console.log("SelAct: ", $scope.selectedActivity);
        $scope.selectedActivity.dayNr = -1;
        $scope.selectedActivity.actNr = -1;
        console.log("SelAct: ", $scope.selectedActivity);
    };

    $scope.setSelectedActivity = function (dayNr, actNr) {
        console.log("SelAct: ", $scope.selectedActivity);
        $scope.selectedActivity.dayNr = dayNr;
        $scope.selectedActivity.actNr = actNr;
        console.log("SelAct: ", $scope.selectedActivity);
    };

HTML的组成部分：

    <div ng-repeat="x in xs">
            <ion-scroll>
                <div ng-repeat="y in ys track by $index">

                    <div ng-click="setSelectedActivity($parent.$index, $index)">
                        <!--THE PROBLEM IS HERE-->
                        <div ng-show="selectedActivity.dayNr == $parent.$index && selectedActivity.actNr == $index">

                            <div>
                                <!--THIS LOGS OUT CORRECT VALUES BUT NG-SHOW IS NOT UPDATED-->
                                <div ng-click="resetSelectedActivity()">
                                    Reset
                                </div>
                            </div>

                        </div>
                        <div>
                            <img src="img/checkButtonOverlay.png" />
                        </div>
                    </div>
                    <!--THIS LOGS OUT CORRECT VALUES AND NG-SHOW _IS_ UPDATED-->
                    <button ng-click="resetSelectedActivity()">reset</button>
                </div>
            </ion-scroll>
        </div>

请注意，由于机密性，我已经从代码中删除了很多内容，但原理应该是相同的。

谢谢！

- Otziii

---

似乎$apply()会有所帮助，但我不知道在它已经运行时如何运行它。 - Otziii

根据https://docs.angularjs.org/api/ng/directive/ngRepeat，ngRepeat会创建一个新的作用域，因此我猜当您更新变量时，它只会在子作用域中更新。 - sch

不好意思，那不是它。我尝试查看父级和子级打印的内容，但没有任何区别。 - Otziii

我删除了一些太多的代码。我在最后的编辑中发布了正确的代码。感谢您的回答。 :) - Otziii

由于原型继承和他共享对象而不是简单属性，因此在这种情况下不适用于@klskl。请查看此答案：https://dev59.com/R2Yq5IYBdhLWcg3w-FXQ#14049482 - Deblaton Jean-Philippe

Answer 1

找到问题了！

我有一个ng-click，它显示了外部的DIV。当我点击时，两个ng-click都被输入了。

所以先重置resetSelectedActivity()，然后在setSelectedActivity()中再次设置。

使用以下方法解决：

<div ng-click="resetSelectedActivity($parent.$index, $index, $event)">
    ...
</div>

并且：

$scope.setSelectedActivity = function (dayNr, actNr, event) {
    $scope.selectedActivity.dayNr = dayNr;
    $scope.selectedActivity.actNr = actNr;

    //This cancel the mouseclick
    event.stopPropagation();
};

- Otziii

---

你的 $event 是一个 JavaScript 对象，与 Angular 无关。你应该将其命名为 event，这样会更清晰易懂。 - Deblaton Jean-Philippe

从另一个Stack Overflow帖子中获取了代码，但是很好的观点。我同意 :) - Otziii

这正是问题所在，事件像您在此fiddle中看到的那样传播：https://jsfiddle.net/abidibo/Lfcsao0h/ - abidibo

@DeblatonJean-Philippee：在AngularJS中，它实际上被称为$event。它是同一个对象，只是另一种获取它的方式：在ng-click中，您可以像这样将$event作为参数发送，并且它将获取JavaScript事件： <div ng-click="testFunction($event)"> 测试 </div> - Otziii

发现在ng-click中不需要发送$event。它可以在没有参数的情况下工作。只需使用event.stopPropagation();即可。 - Otziii