javascript - 动态创建和加载 Angular 指令

Question

在我的应用程序中，我有一个自定义指令名称列表。

$scope.data =["app-hello","app-goodby","app-goodafter"];

此数组中的每个名称都是我创建的一个指令。

var app = angular.module('app',[]).controller('mainCtrl',function($scope){
 $scope.data =["app-hello","app-goodby","app-goodafter"];
}).directive('appHello',function(){
 return {
  restrict:'EA',
  template:'<h1>Hello Directive</h1>'
};
}).directive('appGoodbye',function(){
return {
 restrict:'EA',
template:'<h1>GoodBye</h1>'
 };
}).directive('appGoodafter',function(){
  return{
restrict:'EA',
template:'<h1>Good Afternoon</h1>'
};
});

现在我想在 View 中使用 ng-repeat 加载指令，例如因为我使用了 EA restrict for directive can create directive in ng-repeat 像这样:

<div ng-repeat="d in data" >
  <div {{d}}></div>
</div>

但是这样不行。所以真正的问题是，如果我有指令列表，如何使用 ng-repeat 加载该指令。对于这种情况，我创建了一个 jsbin .谢谢。

Answer 1

你需要一个“master”指令来$compiles HTML(可选地包含指令)到Angular-aware模板中，然后将编译后的元素链接到$scope:

app.directive('master', function ($compile) {
    return {
        restrict: 'A',
        link: function postLink(scope, elem, attrs) {
            attrs.$observe('directive', function (dirName) {
                if (dirName) {
                    var compiledAndLinkedElem =
                            $compile('<div ' + dirName + '></div>')(scope);
                    elem.html('').append(compiledAndLinkedElem);
                }
            });
        }
    };
});

<div master directive="{{dir}}" ng-repeat="dir in ['dir1', 'dir2', 'dir3']"></div>

---

另请参阅此 short demo .