angular 使用 ng-click 和函数设置变量的区别

Question

这是我运行过几次的东西。

假设我的控制器中有以下变量：

$scope.valueArr = ['Hello', 'No', 'Yes'];
$scope.myValue = 'Hello';

我有以下 ng-repeat:

<li ng-repeat="value in valueArr" ng-class="{'active' :  myValue == value}"><a>{{value}}</a> </li>

现在，如果我执行以下操作：

<a ng-click="myValue = value"> </a>

然后它将 class 添加到 li 但是它确实从之前的 li

中删除了 class

但如果我执行以下操作：

<a ng-click="setMyValue(value);"> </a>

并在我的控制器中添加功能：

$scope.setMyValue = function(value){$scope.myValue = value}

然后它删除 "old" 并且仅将 active class 添加到最后按下的 li

所以看起来它不是在没有控制器中的功能的情况下重新渲染。谁能告诉我为什么？以及何时应该选择其中之一。

请注意，这只是没有发生重新渲染的众多示例之一。

Answer 1

ng-repeat 为每个重复的元素创建一个新的子作用域。所以当你写

<a ng-click="myValue = value"> </a>

当用户单击按钮时，您正在 <li> 的子作用域上创建新变量 'myValue'。这隐藏了父作用域 'myValue' 的值，但不会改变它 - 所以所有其他 <li> 作用域仍然从父作用域继承 'myValue' 的值。

然而，当你写

<a ng-click="setMyValue(value);"> </a>

您正在引用在父作用域上定义的函数 setMyValue。因此，当用户单击按钮时，将执行 setMyValue 函数并在父作用域上设置 'myValue'。未触及子作用域。因为父作用域的值发生了变化，所以所有 <li> 元素都继承了它。

Answer 2

这是因为 ng-repeat 创建了一个子作用域参考 DOC。

这意味着每个重复都有一个单独的范围

there is a separate child scope for first repeat.

there is a separate child scope for second repeat.

there is a separate child scope for third repeat.

... like wise

所以如果你访问变量 (myValue) 作为 ng-click="myValue = value" angular 在 repeat's 子作用域中搜索并且在意识到没有名为 myValue 的变量之后或者没有任何其他访问引用然后在子作用域上创建一个 myValue 。如何使用 $parent.myValue.

访问父作用域

勾选 DEMO

---

另一种方法是使用像这样的对象，

$scope.tempObj = {myValue : 'Hello'};

并使用

引用此内容

<a ng-click="tempObj.myValue = value">

因为myValue是一个对象属性（tempObj的对象）那么如果angular意识到在子作用域中没有tempObj对象它将搜索父级的范围。

---

如果您使用

<a ng-click="setMyValue(value);"> </a>

&

$scope.setMyValue = function(value){$scope.myValue = value}

在 setMyValue 函数中它使用 $scope.myValue ，它在控制器范围内而不在 repeat's 子范围内。