Question

我有一个AngularJS应用程序，只是注意到如果我一起使用ng-show和ng-click并且不使用控制器上的功能，那么ng-show没有按预期工作。

所以我有这个：

<div ng-app ng-controller="Controller">
    <div ng-repeat="d in data">
        <button ng-show="showEdit!==d" ng-click="showEdit=d">{{d}}</button>
    </div>
</div>

使用控制器：

function Controller($scope){
    $scope.data=[1,2,3]
}

小提琴：http://jsfiddle.net/sashee/v6XrK/

当我点击它们时按钮就消失了，再也没有了。

如果我将视图更改为：

<div ng-app ng-controller="Controller">
    <div ng-repeat="d in data">
        <button ng-show="showEdit!==d" ng-click="show(d)">{{d}}</button>
    </div>
</div>

控制器：

function Controller($scope){
    $scope.data=[1,2,3]

    $scope.show=function(d){
        $scope.showEdit=d;
    }
}

小提琴：http://jsfiddle.net/sashee/UFGv4/

一切都按预期工作。我认为两个版本应该完全相同，但它们不是。可能有什么区别或解释？

Answer 1

简单，ng-repeat创建了自己的范围，因此当您在showEdit=d内ng-repeat - showEdit时，{@ 1}}仅限于当前转发器的范围。您的变量已设置，按钮消失。

在您调用该函数的示例中，您有一个变量$scope.showEdit - 该变量不仅限于repeat范围，因此您将始终显示两个按钮，显示自showEdit由于每次点击，1}}的分配方式不同。

Answer 2

请在角度表达中使用空格。

不同之处在于您的ng-show和ng-click处于ng-repeat中。每个ng-repeat元素都有自己的范围。因此，当您执行以下操作时：

纳克单击= “showEdit = d”

您正在匿名ng-repeat范围创建showEdit的新值，而不是控制器知道的范围。其他ng-repeat元素对此一无所知，因此您的条件ng-show =“showEdit！== d”反映了您刚设置的值，而不是您控制器中showEdit的值。

Answer 3

嗯，这有点古怪。

ng-repeat为每个迭代元素创建新范围。

绑定点击表达式showEdit=d时，实际上将此表达式绑定到由ng-repeat创建的第N 范围（因此showEdit位于scopeN在showEdit）。

当您只使用Controller中的功能时，您可以更改控制器范围的- Controller scope (showEdit in the 2nd example) - scope 1 (showEdit 1 in the 1st example) - scope 2 (showEdit 2 in the 1st example) ... - scope N (showEdit N in the 1st example)字段！

{{1}}

仅使用属性时，AngularJS不会刷新ng-show

3 个答案: