Динамические шаблоны директивы AngularJS

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

это то, что я сделал до сих пор, что я не знаю, почему не работает http://jsbin.com/mibeyotu/1/edit

HTML-элемента: 

<data-type content-attr="test1"></data-type>
4 60
angularjs angularjs-directive angularjs-scope

4 ответа:

1) Вы передаете контент в качестве атрибута в HTML. Попробуйте это:

element.html(getTemplate(attrs.content)).show();

вместо:

element.html(getTemplate(scope.content)).show();

2) часть данных директивы компилируется, поэтому вы должны использовать что-то еще. Вместо типа данных, например datan-type.

вот ссылка:

http://jsbin.com/mibeyotu/6/edit

15

вы можете установить template свойство объекта определения директивы для функции, которая возвращает динамический шаблон:

restrict: "E",
replace: true,
template: function(tElement, tAttrs) {
    return getTemplate(tAttrs.content);
}

обратите внимание, что у вас нет доступа к области на данный момент, но вы можете получить доступ к атрибутам через tAttrs.

Теперь ваш шаблон определяется перед этапом компиляции, и вам не нужно вручную компилировать его.

108

вы также можете сделать это очень просто, как это:

appDirectives.directive('contextualMenu', function($state) {
    return {
      restrict: 'E',
      replace: true,
      templateUrl: function(){
        var tpl = $state.current.name;
        return '/app/templates/contextual-menu/'+tpl+'.html';
      }
    };
});
20

Если вам нужно загрузить шаблон на основе $scope переменные вы можете сделать это с помощью ng-include:

.directive('profile', function() {
  return {
    template: '<ng-include src="getTemplateUrl()"/>',
    scope: {
      user: '=data'
    },
    restrict: 'E',
    controller: function($scope) {
      //function used on the ng-include to resolve the template
      $scope.getTemplateUrl = function() {
        //basic handling
        if ($scope.user.type == 'twitter') {
          return 'twitter.tpl.html';
        }
        if ($scope.user.type == 'facebook') {
          return 'facebook.tpl.html';
        }
      }
    }
  };
});

Ссылка:https://coderwall.com/p/onjxng/angular-directives-using-a-dynamic-template

10