任何方式來動態加載角度指令？

基本上，既不<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>

我認爲這是最低限度的措施，但可能有一些不對的地方，所以請看下面的答案。

來源

2014-01-18 Greg

讓我們以這種方式進行調整（修正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如果你不這樣做，請責備我。

來源

2014-01-18 07:29:52

任何方式來動態加載角度指令？

回答

相關問題