Javascript 有没有办法动态加载角度指令？

这里有一把小小提琴：

基本上，

和

都不插值

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

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

---

我相信拉迪姆·克勒的答案是正确的。就在发布之前，我拼凑了一些东西来加载另一个指令的指令，如下所示：

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

angular.module（'myApp'，[]）.directive（'loadTmpl'，function（$compile）{
返回{
限制：“A”，
替换：正确，
链接：函数（$scope、$element、$attr）{
$element.html（“”）；
$compile（$element.contents（））（$scope）；
}
};
});

以及：

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

让我们这样调整它（udpated）。观点：

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

这是一个新指令

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

.directive（'mySelector'，
['$templateCache'，'$compile'，
函数（$templateCache，$compile）{
返回{
范围：{
名称：'='
},
替换：正确，
模板：“”，
链接：功能（范围、elm、属性）{
scope.buildView=函数（名称）{
var tmpl=$templateCache.get（“dir foo-”+name）；
var视图=$compile（tmpl）（范围）；
elm.append（视图）；
}
},
控制器：['$scope'，函数（scope）{
范围$watch（'name'，函数（name）{
scope.buildView（名称）；
});
}],          
};
}])
.run（['$templateCache'，函数（$templateCache）{
$templateCache.put（“dir foo bar，”）；
$templateCache.put（“dir foo baz”，”；
}])

如果你喜欢，所有的功劳都归你，如果你不喜欢，就怪我

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

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