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>'
};
});

现在我想在视图中加载带ng-repeat的指令，例如因为我使用EA restrict for directive可以在ng-repeat中创建指令，如下所示：

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

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

Answer 1

你需要一个＆＃34;主人＆＃34;将$compile 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 。

Answer 2

你可以这样做：

指令：

app.directive('compile',function($compile){
  return{
    restrict:'A',
    template: '<div></div>',
    link:function(scope,elem,attrs){
      scope.name = attrs.compile;
      elem.children('div').attr(scope.name,'');
      $compile(elem.contents())(scope);
    }
  };
});

HTML：

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

Jsbin：http://jsbin.com/wofituye/4/edit

Answer 3

我实际上更喜欢创建只包含指令的模板。然后你可以使用ng-include这使你能够轻松地将范围变量传递给动态选择的指令。

以下是我的小部件代码示例：

<div ng-repeat="widget in widgets track by $index" ng-include="widget.url" class="widget-container" ng-class="widget.widget_type.config.height +' ' + widget.widget_type.config.width">
</div>

然后我将widget.url设置为一个只包含正确指令的模板。

然后我可以在我的指令中这样做：

<custom-widget ng-attr-widget="widget"></custom-widget>

然后我也可以访问动态变量，所以我也可以访问配置细节，而不必动态生成HTML字符串并编译它们。不是一个完美的解决方案，但我个人习惯使用上面提到的其他方法，并发现这更符合我的需求。

动态创建和加载角度指令

3 个答案: