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>
答
与结合在链接功能的事件,而不是添加具有另一个属性试试吧被编译(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);
};
}
};
})
谢谢,@ 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