AngularJS - 使用ng-repeat的动态指令 [英] AngularJS - Dynamic Directives using ng-repeat
问题描述
我花了一些时间试图找到一个优雅的解决方案,而我有一个有效的解决方案,它不是最简单或最正确的做事方式。
所以,我的问题是......我怎样才能动态加载指令!在某些情况下,下面是我希望我能够逃脱它的方式!我没有包含路由或除模板加载之外的任何内容,我将以下控制器分配给ng-controller。
app.js
angular.module('myApp',[])
.controller('someController',[ '$ scope',函数($ scope){
$ scope.directives = ['myDirectiveA','myDirectiveB'];
}])
.directive('myDirectiveA ',function(){
返回{
模板:'< p>指令A,令人兴奋。< / p>'
};
})
.directive('myDirectiveB',function(){
return {
template:'< p>指令B,同样令人兴奋。< / p>'
} ;
});
template.html
< div ng-controller =someController>
< div ng-repeat =指令中的指令>
< x-directive>< / x-directive> //尝试1
< x - {{directive}}>< / x - {{directive}}> //尝试2
< {{'x-'+指令}}>< / {{'x-'+指令}}> //尝试3
< / div>
< / div>
任何人都可以提出的建议将不胜感激,如果我做任何明显愚蠢的事情,请原谅这是我第一次使用Angular!
我希望这可以帮到你:
for explain:当你想在其他指令如ngRepeat或其他自定义指令中使用
时,你必须编译你的指令......
angular.module('myApp',[])。invtroller('someController',['$ scope',function($范围){$ scope.directives = ['my-directive-a','my-directive-b'];}])。.directive('directive',function($ compile){return {restrict:A,范围:{set:= },link:function(scope,element){element.html(< div class = \+ scope.set +\>< / div>); $编译(element.contents())(范围); }}; } .directive('myDirectiveA',function(){return {restrict:C,template:'< p> Directive A,exciting。< / p>'};}} .directive('myDirectiveB', function(){return {restrict:C,template:'< p>指令B,同样令人兴奋。< / p>'};});
<!DOCTYPE html>< html ng-app =myApp>< head> < title>< / title>< / head>< body ng-controller =someController> < div ng-repeat =指令中的指令> < div directive set =directive>< / div> < / DIV> < script src =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js>< / script>< / body>< / html> ;
I've spent a while trying to find an elegant solution to this, whilst I have a solution that 'works' it doesn't feel like the easiest or correct way of doing things.
So, my question is...how can I dynamically load directives! For some context, below is how I was hoping I'd be able to get away with it! I've not included the routing or anything but the template loads and I assign the below controller with ng-controller.
app.js
angular.module('myApp', [])
.controller('someController', ['$scope', function($scope) {
$scope.directives = ['myDirectiveA', 'myDirectiveB'];
}])
.directive('myDirectiveA', function() {
return {
template: '<p>Directive A, exciting.</p>'
};
})
.directive('myDirectiveB', function() {
return {
template: '<p>Directive B, equally as exciting.</p>'
};
});
template.html
<div ng-controller="someController">
<div ng-repeat="directive in directives">
<x-directive></x-directive> // Attempt 1
<x-{{directive}}></x-{{directive}}> // Attempt 2
<{{'x-' + directive}}></{{'x-' + directive}}> // Attempt 3
</div>
</div>
Any advice that anyone can offer would be greatly appreciated, excuse me if I'm doing anything obviously stupid this is my first time round with Angular!
i hope this help you:
for explain: you have to $compile your directive when you want to use it in other directive like ngRepeat or other custom directive...
angular.module('myApp', [])
.controller('someController', ['$scope', function ($scope) {
$scope.directives = ['my-directive-a', 'my-directive-b'];
}])
.directive('directive', function ($compile) {
return {
restrict: "A",
scope: {
set: "="
},
link: function (scope, element) {
element.html("<div class=\" "+ scope.set +" \"></div>");
$compile(element.contents())(scope);
}
};
})
.directive('myDirectiveA', function () {
return {
restrict: "C",
template: '<p>Directive A, exciting.</p>'
};
})
.directive('myDirectiveB', function () {
return {
restrict: "C",
template: '<p>Directive B, equally as exciting.</p>'
};
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
</head>
<body ng-controller="someController">
<div ng-repeat="directive in directives">
<div directive set="directive"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>
这篇关于AngularJS - 使用ng-repeat的动态指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!