Ng-click在ng-repeat内不起作用。外面工作。
我把一个 fiddle here @H_403_2@<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>
我把一个 fiddle here @H_403_2@<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>
正如Ven所说,ng-repeat为循环中的每个项目创建一个子范围。子范围可以通过原型继承来访问父范围的变量和方法。令人困惑的部分是做出赋值时,它会向子范围添加一个新变量,而不是更新父作用域上的属性。点击后,当你做一个分配调用tiggerTitle = e.name,它实际上添加一个名为triggerTitle的新变量到子作用域。 AngularJS文档在这里称为
JavaScript Prototypal Inheritance的部分解释得很好。
那么你如何解决这个问题,并且正确设置模型变量?
一个简单而肮脏的解决方案是使用$ parent访问父范围。
@H_403_2@<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可能会导致问题。更好的解决方案可能是向控制器的范围添加一个函数,该函数返回对控制器范围的引用。如前所述,子范围可以访问父函数,从而可以引用控制器的作用域。
@H_403_2@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