我试图在指令中重复一个指令,这样我就可以在每个指令上都有一个模板,但问题是我在使用ng-transclude时只能显示第一个条目
这是我到目前为止所做的事情
<div ng-app="TestApp">
<div ng-controller="TestCtrl">
<test-collector>
<test-data xx-value="Mouse" xx-href="https://fb.com" />
<test-data xx-value="Keyboard" xx-href="https://goo.gl" />
</test-collector>
</div>
</div>
对于 Controller
var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope', function($scope){
}]);
app.directive("testCollector", function () {
return {
restrict: "E",
scope: {},
transclude: true,
replace: true,
controller: function($scope) {
},
template: '<div>' +
'<div ng-transclude></div>' +
'</div>'
}
});
app.directive("testData", function(){
return {
restrict: "E",
require: '^testCollector',
transclude: true,
replace: true,
scope: {
xxValue: '@',
xxHref: "@"
},
template: '<a href="{{xxHref}}">{{xxValue}}</a>'
}
});
我只得到鼠标
我准备了一把 fiddle 来看看它的实际效果CLICK HERE
请提供任何帮助。
提前谢谢
最佳答案
你搞乱了你的指令<test-data>
标签。您还没有关闭test-data
。您将自关闭标签设置为 test-data
元素如 <test-data />
.
HTML
<div ng-app="TestApp">
<div ng-controller="TestCtrl">
<test-collector>
<test-data xx-value="Mouse" xx-href="https://fb.com"></test-data>
<test-data xx-value="Keyboard" xx-href="https://goo.gl"></test-data>
</test-collector>
</div>
</div>
关于javascript - ng-repeat 上的嵌入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28013227/