Ng-click在ng-repeat内部不起作用。

8 浏览
0 Comments

Ng-click在ng-repeat内部不起作用。

ng-click在ng-repeat内部无法工作。在外部可以工作。

我在这里放了一个fiddle。

 test
    
请选择触发事件:[{{triggerEvent}}] {{triggerTitle}}

0
0 Comments

在ng-repeat中,ng-click不起作用的原因是ng-repeat为循环中的每个项创建了一个子作用域。子作用域通过原型继承可以访问父作用域的变量和方法。让人困惑的是当进行赋值操作时,它会在子作用域中添加一个新的变量,而不是更新父作用域的属性。在ng-click中,当进行赋值调用时,实际上是在子作用域中添加了一个名为triggerTitle的新变量。AngularJS文档在这里的部分JavaScript Prototypal Inheritance中很好地解释了这一点。

那么如何解决这个问题并正确设置模型变量呢?一个快速而简单的解决方案是使用$parent访问父作用域,像这样:

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

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

使用$parent可能会在处理嵌套模板或嵌套ng-repeats时出现问题。更好的解决方案可能是在控制器的作用域中添加一个返回对控制器作用域的引用的函数。如前所述,子作用域可以调用父函数,因此可以引用控制器作用域。

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

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

认为最好的解决方案将是使用"controllerAs"。

0
0 Comments

在ng-repeat中,ng-click不起作用的原因是ng-repeat创建了一个新的作用域,无法直接访问父作用域中的变量。要解决这个问题,可以使用$parent关键字来访问父作用域中的变量。

具体来说,将ng-click中的代码修改为$parent.triggerTitle=e.name; $parent.triggerEvent = e.action;即可。

以下是修改后的代码示例:

  • {{e.action}} {{e.name}}
  • 通过使用$parent关键字,我们可以在ng-repeat块中访问父作用域中的triggerTitle和triggerEvent变量,从而解决ng-click在ng-repeat中不起作用的问题。

    0
    0 Comments

    问题的原因是因为ng-repeat创建了一个新的作用域。这是因为JavaScript的原型继承机制的细微差别,在不完全了解原型继承的情况下可能会难以理解。在这种情况下,我们可以通过强制访问继承链来解决这个问题。解决方法是通过访问继承链来确保始终访问正确的对象,无论是访问还是修改值。这可以通过在对象之间创建原型继承关系来实现。具体代码可以参考以下示例:

    var a = {obj: {value: 5}};
    var b = Object.create(a);
    alert(b.obj.value); // 输出5
    b.obj.value = 10;
    alert(b.obj.value == a.obj.value); // 输出true
    

    然而,这个答案引起了一些争议,但事实上这是JavaScript的工作原理。在学习Angular之前,你应该先了解JavaScript的工作原理。Angular的文档可能不够详细,但是有很多在线例子和活跃的社区可以参考。此外,这个问题的解决方法需要作者深入理解,因此没有给出固定的代码。

    总之,ng-clickng-repeat内部不起作用的原因是因为ng-repeat创建了一个新的作用域。解决方法是通过访问继承链来确保始终访问正确的对象。希望以上内容对你有帮助。

    0