我想使用同一指令的多个实例来呈现一个集合。我正在使用隔离范围将数组映射到隔离范围中的名称。孤立作用域中的链接函数可以正确看到映射的数组,但是其中的ng-repeat无效。
<html ng-app="MyApp">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var MyCtrl = function($scope) {
$scope.blah = [1,2,4,5];
$scope.bar = [14,52,64,25];
}
angular.module("MyApp", [])
.directive("sephBlah", function($parse) {
return {
scope: {
tags: "=sephBlah"
},
link: function(scope, elem, attrs) {
console.log(scope.tags[0]);
}
}
});
</script>
</head>
<body ng-controller="MyCtrl">
<div seph-blah="blah">
<p data-ng-repeat="t in tags">{{t}}</p><!-- why this renders nothing? -->
</div>
<div seph-blah="bar">
<p data-ng-repeat="t in tags">{{t}}</p><!-- why this renders nothing? -->
</div>
</body>
</html>
我不确定ng-repeat为什么不显示任何内容。链接功能可以正确看到阵列。
最佳答案
您不应该使用这样的指令。您想要获得的功能应该使用控制器来完成。
使用指令时,请使用template
或templateUrl
属性提供内容。所以这将工作:
.directive("sephBlah", function($parse) {
return {
scope: {
tags: "=sephBlah"
},
template: '<p data-ng-repeat="t in tags">{{t}}</p>',
link: function(scope, elem, attrs) {
console.log(scope.tags[0]);
}
}
});
并在html中执行以下操作:
<div ng-attr-seph-blah="blah"></div>