AngularJS：将属性添加到ng-repeat内部的指令元素不起作用

我有一个指令，在单独使用时可以正常工作，但是当它在ng-repeat内部使用时，它将停止工作。我知道ng-repeat会创建它自己的隔离范围，但这不应该成问题，因为我不想在我的指令的隔离范围之外做任何事情。我已经创建了一个运动员来展示你可以在这里看到的问题：http://plnkr.co/edit/Y4ADmznnDCZvuxJrcZQ0?p=preview。AngularJS：将属性添加到ng-repeat内部的指令元素不起作用

在指令的编译函数中，我将一个ng-click属性添加到元素中。请注意，“This works”链接（不在ng-repeat中）工作正常，但其他链接（在ng-repeat内部）不起作用。

下面是从plunker指令：

var app = angular.module('plunker', []); 
app.controller("AppCtrl", function($scope) { 
    $scope.users = [{ 
    name: 'John', 
    id: 1 
    }, { 
    name: 'anonymous' 
    }]; 
}); 
app.directive("myDir", function($compile) { 
    return { 
    controller: 'directiveController', 
    compile: function(el) { 
     el.removeAttr('my-dir'); 
     el.attr('ng-click', 'fxn()'); 
     var fn = $compile(el); 
     return function(scope){ 
     fn(scope); 
     }; 
    } 
    }; 
}) 
.controller("directiveController", function($scope) { 
    $scope.fxn = function() { 
     alert('It works'); 
    }; 
});

这里是HTML：

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.12/angular.js" data-semver="1.2.12"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <div> 
     <a my-dir>This works</a> 
     <a my-dir ng-repeat="id in [1,2]"><br>This does not work</a> 
    </div> 
    </div> 
    </body> 

</html>

来源

2014-12-27 Jim Cooper

与结合在链接功能的事件，而不是添加具有另一个属性试试吧被编译（DEMO）：

app.directive("myDir", function($compile) { 
    return { 
    controller: 'directiveController', 
    compile: function(el) { 
     el.removeAttr('my-dir'); 

     var fn = $compile(el); 
     return function(scope, el){ 
     el.bind('click', scope.fxn); 
     fn(scope); 
     }; 
    } 
    }; 
})

来源

2014-12-27 21:12:52

谢谢，@ marcel-gwerder，确实有效，但是，它这是一个让我无法工作的问题。为了这个问题，我已经过分简化了我的Plunker。我真正需要的是在父控制器上调用一个函数。所以，虽然这工作，我可以得到它调用父方法（通过传入隔离作用域），我无法弄清楚如何传递参数。这是一个更新的Plunker显示问题：http://plnkr.co/edit/uRGkoh4qrYQhDxi2OlP8?p=preview。谢谢！ – 2014-12-28 00:20:32

你能告诉我为什么你需要所有的指示性的东西，而不仅仅是：'
{{user.name}}'？ – 2014-12-28 00:33:01

这是为了解决这个问题而简化的大型应用程序的一部分。我有一个窗体指令，它有一个form-page指令，它具有多个表单行指令，并且具有多个表单列指令。当用户点击表单列时，我需要通知外部表单并将该列传递给表单控制器中的方法。 – 2014-12-28 02:34:31

AngularJS：将属性添加到ng-repeat内部的指令元素不起作用

回答

相关问题