angularJS - шаблоны переменных компонентов

Question

Можно ли определить шаблон переменной для компонента в angularJS 1.6? Что-то вроде этого:

<div class="test"> 
    <{{$ctrl.GetElement()}}> 
</div>   

за исключением случаев, в которых я хочу, чтобы решить, во время выполнения, что шаблон быть.

Есть ли способ сделать это?

Answer 1

Вот простой пример «шаблона переменной» с использованием $compile. Давайте определим «генератор» директиву, которая будет в состоянии генерировать другие директивы:

app.directive('createDirective', function($compile) { 
    return { 
     scope: { 
      directiveName: '@' 
     }, 
     link: function(scope, element) { 
      var newHtml = '<' + scope.directiveName +'></ '+ scope.directiveName +'>'; 
      element.append($compile(newHtml)(scope)); 
     } 
    }; 
}); 

Эта директива «генератор» занимает в строке (через «директива-наме» атрибута), собирает новый HTML, компилирует его, и добавляет полученный HTML в директиву генератора.

Я определил отдельную директиву под названием «Hello», который я хочу назвать динамически из директивы генератора:

app.directive('hello', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element) { 
      element.append("Hello!"); 
     } 
    } 
}); 

Теперь мы можем использовать директиву генератора для компиляции «Hello» директивы

<div create-directive directive-name="hello"></div> 

что приводит этот сгенерированный HTML

<hello class="ng-scope"> 
    <!-- hello--> 
    Hello! 
</hello> 

в Кроме того, мы можем передать переменную из контроллера в директиве генератора аналогичным образом:

app.controller('MainCtrl', function($scope) { 
    $scope.newDirective = "from-controller"; 
}); 

И в HTML:

<div create-directive directive-name="{{newDirective}}"></div> 

Обязательно посмотрите на $compile documentation.

Demo