从父指令或控制器中的指令名称数组渲染 AngularJS 指令答案

【问题标题】：Rendering AngularJS directives from array of directive names in a parent directive or controller从父指令或控制器中的指令名称数组渲染 AngularJS 指令
【发布时间】：2013-08-31 09:54:35
【问题描述】：

我正在尝试根据指令名称的配置数组动态呈现指令。这在角度上可能吗？我还希望这些渲染指令存在于单个父 dom 元素中，而不是每个都获得一个新的包装器（就像使用 ng-repeat 一样）

http://jsfiddle.net/7Waxv/

var myApp = angular.module('myApp', []);

myApp.directive('one', function() {
    return {
        restrict: 'A',
        template: '<div>Directive one</div>'
    }
});

myApp.directive('two', function() {
    return {
        restrict: 'A',
        template: '<div>Directive two</div>'
    }
});

function MyCtrl($scope) {
    $scope.directives = ['one', 'two'];
}

<div ng-controller="MyCtrl">
    <div ng-repeat="directive in directives">
        <div {{directive}}></div>
    </div>
</div>

编辑：自发布此消息以来，我也尝试过：

.directive('parentDirective', function () {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, element) {
      scope.directives = ['one', 'two'];
      for (var i = 0; i < scope.directives.length; i++) { 
        element.prepend('<div ' + scope.directives[i] + '></div>')
      }
    }
  };
});

<div parent-directive></div>

这样，前置指令中的模板不会被渲染。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

这就是我想出的（花了很长时间）...虽然解决方案非常通用，但您可以随意修改$scope.directives 数组，并且指令将动态制作。您还可以指向当前范围内的任何特定属性以从中检索指令列表。

Demo link

app.js

var myApp = angular.module('myApp', []);

myApp.directive('one', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div>Directive one</div>'
    }
});

myApp.directive('two', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div>Directive two</div>'
    }
});

myApp.directive('dynamic', function ($compile, $parse) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, element, attr) {
      attr.$observe('dynamic', function(val) {
        element.html('');
        var directives = $parse(val)(scope);
        angular.forEach(directives, function(directive) {
          element.append($compile(directive)(scope));
        });
      });
    }
  };
});

function MyCtrl($scope) {
    $scope.directives = ['<one/>', '<two/>'];
    $scope.add = function(directive) {
        $scope.directives.push(directive);
    }
}

index.html

<div ng-controller="MyCtrl">
    <div dynamic="{{directives}}"></div>
    <button ng-click="add('<one/>')">Add One</button>
    <button ng-click="add('<two/>')">Add One</button>
</div>

【讨论】：

而不是使用element.append，您是否考虑过设置restrict: 'C' 并更新元素上的类？这样，指令可以添加到现有的 dom 元素或创建新元素时。

【解决方案2】：

所以如果我在前面的指令上使用 $compile，第二次尝试就会成功：

.directive('parentDirective', function($compile)
    ....
element.prepend($compile('<div ' + scope.directives[i] + '"></div>')(scope));

【讨论】：