angularjs - ng-click 在 ng-repeat 中不起作用

Question

ng-click 在 ng-repeat 内部不起作用。在外面它工作。
我放了一个 fiddle here

<div ng-controller="MyCtrl">
 <a ng-click="triggerTitle='This works!'">test</a>
    <h5>Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}</h5>
       <ul class="dropdown-menu">
         <li ng-repeat="e in events">
             <a ng-click="triggerTitle=e.name; triggerEvent = e.action;">{{e.action}} - {{e.name}}</a>
         </li>
       </ul>
</div>

Answer 1

正如文所说，ng-repeat确实为循环中的每个项目创建了一个子范围。子作用域确实可以通过原型(prototype)继承访问父作用域的变量和方法。令人困惑的部分是当您进行分配时，它会向子范围添加一个新变量，而不是更新父范围上的属性。在 ng-click ，当您调用tiggerTitle =e.name 时，它实际上添加了一个名为 triggerTitle 的新变量到子范围。 AngularJS 文档在此处称为 JavaScript Prototypal Inheritance 的部分中很好地解释了这一点。 .

那么如何解决这个问题并正确设置模型变量呢？

一个快速而肮脏的解决方案是使用 $parent 访问父作用域。像这样。

<a ng:click="$parent.triggerTitle=e.name; $parent.triggerEvent = e.action;">...

Click to see a working version of your Fiddle using the $parent solution.

使用 $parent如果您正在处理嵌套模板或嵌套 ng-repeats，可能会导致问题。更好的解决方案可能是向 Controller 的作用域添加一个函数，该函数返回对 Controller 作用域的引用。如前所述，子作用域有权调用父函数，因此可以引用 Controller 的作用域。

function MyCtrl($scope) {
    $scope.getMyCtrlScope = function() {
         return $scope;   
    }
 ...

<a ng-click="getMyCtrlScope().triggerTitle=e.name;getMyCtrlScope().triggerEvent = ...

Click to see a working version of your Fiddle using the better method