Question

这是一个简短的小提琴：

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

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

请原谅我，如果之前已经问过这个问题，但我搜查了一下，却找不到它。

我相信RadimKö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>

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

Answer 1

让我们这样调整（udpated 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，如果您不喜欢，请责备我。

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

1 个答案: