ng-click 在 ng-repeat 中不起作用 [英] Ng-click doesn't work inside ng-repeat

问题描述

Ng-click 在 ng-repeat 中不起作用.它在外面工作.我放了一个小提琴

<a ng-click="triggerTitle='This works!'">test</a><h5>请选择触发事件:[{{triggerEvent}}] {{triggerTitle}}</h5><ul class="下拉菜单"><li ng-repeat="e in events"><a ng-click="triggerTitle=e.name; triggerEvent = e.action;">{{e.action}} - {{e.name}}</a>

解决方案

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

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

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

点击查看使用 $parent 解决方案的 Fiddle 的工作版本.

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

function MyCtrl($scope) {$scope.getMyCtrlScope = function() {返回 $scope;}...<a ng-click="getMyCtrlScope().triggerTitle=e.name;getMyCtrlScope().triggerEvent = ...

点击查看使用更好方法的 Fiddle 的工作版本

Ng-click doesn't work from inside ng-repeat. Outside it works. I've put a 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>

解决方案

As Ven mentioned, ng-repeat does create a child scope for each item in the loop. The child scopes do have access to the parent scope's variables and methods through prototypal inheritance. The confusing part is when you make an assignment, it adds a new variable to the child scope rather than updating the property on the parent scope. In ng-click, when you make an assignment call tiggerTitle =e.name, it actually adds a new variable called triggerTitle to the child scope. The AngularJS docs explains this well in the section here called JavaScript Prototypal Inheritance.

So how do you get around this and set the model variable properly?

A quick and dirty solution is to access the parent scope using $parent like so.

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

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

The use of $parent can cause issues if you are dealing with nested templates or nested ng-repeats. A better solution may be to add a function to the controller's scope which returns a reference to the controller's scope. As already mentioned, the child scopes have access to call the parent functions, and thus can reference the controller's scope.

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

这篇关于ng-click 在 ng-repeat 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！