有什么方法可以动态加载角度指令？答案

【问题标题】：Any way to dynamically load angular directives?有什么方法可以动态加载角度指令？
【发布时间】：2014-01-18 06:38:32
【问题描述】：

这是一个简短的小提琴：

基本上，<div data-foo-{{letterA}}></div> 和 <div data-ng:model="foo-{{letterB}}"></div> 都不会被插值。

我正在寻找一种方法来动态加载几个内联模板中的一个。

如果以前有人问过这个问题，请原谅我，但我搜索并找不到它。

我相信 Radim Köhler 有正确的答案。就在它发布之前，我拼凑了一些东西来从另一个指令中加载指令，如下所示：

angular.module('myApp', []).directive('loadTmpl', function($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function($scope, $element, $attr) {
            $element.html("<div data-card-"+$attr.loadTmpl+"></div>");
            $compile($element.contents())($scope);
        }
    };
});

还有：

<div data-load-tmpl="{{directiveName}}"></div>

我认为这是极简主义的做法，但它可能有问题，所以请看下面的答案。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

让我们这样调整它（更新的fiddle）。观点：

<div my-selector name="letterA"></div>
<div my-selector name="letterB"></div>

控制器：

function myCtrl($scope) {
    $scope.letterA = 'bar';
    $scope.letterB = 'baz';
}

这里是新指令mySelector，包含选择器

.directive('mySelector', 
  [       '$templateCache','$compile', 
  function($templateCache , $compile) {
    return {
      scope: {
        name: '='
      },
      replace: true,   
      template: '',            
      link: function (scope, elm, attrs) {

        scope.buildView = function (name) {
            var tmpl = $templateCache.get("dir-foo-" + name);
            var view = $compile(tmpl)(scope);
            elm.append(view);
        }
      },
      controller: ['$scope', function (scope) {
        scope.$watch('name', function (name) {
            scope.buildView(name);
        });
      }],          
    };
}])
.run(['$templateCache', function ($templateCache) {
    $templateCache.put("dir-foo-bar", '<div data-foo-bar></div>');
    $templateCache.put("dir-foo-baz", '<div data-foo-baz></div>');
}])

如果你喜欢，所有的功劳都归Render a directive inside another directive (within repeater template)和AngularJS - Directive template dynamic，如果你不喜欢，怪我。

【讨论】：