Angularjs директива задает шаблон url динамически

Я создаю директиву с URL-адресом шаблона. Я хочу, чтобы динамический шаблон шаблона был основан на user_role. Любая идея?

Вот мой код директивы:

RatingRX.directive "headermenu", ->
  directive = {}
  directive.restrict = 'E'
  directive.templateUrl = "../assets/common/headerMenu{{user_role}}.html"
  directive

И я хочу установить user_role из контроллера. Например:

$scope.user_role = 1

Ответ 1

Вы можете передать функцию опции templateUrl и вернуть строку, которая будет использоваться в качестве шаблона url в конце.

Прежде всего назначьте роль в качестве атрибута (где userRole привязан к области) как:

<div my-directive user-role="{{userRole}}></div>

Тогда директива может читать ее как:

myApp.directive('myDirective', function() {
  return {
    restrict: 'A',
    templateUrl: function(element, attrs) {
      return "../assets/common/headerMenu" + attrs.userRole + ".html";
    }
  }
});

Update: Раньше это работало со старой версией Angular.

<div ng-if="userRole === 'admin'" my-directive user-role="admin"></div>

Ответ 2

вы можете манипулировать ng-include как шаблон

HTML:

<headermenu user-role="selectedUserRole"></headermenu>

JS:

app.directive('headermenu', function() {
  return {
    restrict: 'E',
    scope: {
      userRole : '='
    },
    link: function($scope)
    {
      $scope.$watch('userRole', function(userRole)
      {
        if (userRole && userRole.length)
        {
            $scope.dynamicTemplateUrl = 'assets/common/headerMenu' + userRole + '.html';
        }
      });
    },

    template: '<ng-include src="dynamicTemplateUrl"></ng-include>'
  };
});

demo: http://plnkr.co/edit/CCElZ317kYeZpa5ofmoo?p=preview

Или если вы не хотите устанавливать полный путь в контроллере:

HTML:

<headermenu path="assets/common/headerMenu{{selectedUserRole}}.html"></headermenu>

JS:

app.directive('headermenu', function() {
  return {
    restrict: 'E',
    scope: {
      path : '@'
    },
    template: '<ng-include src="path"></ng-include>'
  };
});

demo: http://plnkr.co/edit/HEyUUzv6jbjZCDDbAzPm?p=preview

Ответ 3

Почему бы не сделать:

template : '<div ng-include="getActualTemplateContent()"></div>'

то

$scope.getActualTemplateContent= function() {
  return '../assets/common/headerMenu/' + $scope.user_role + '.html';
};

Ответ 4

Если не поместить его в разметку.

<div headermenu template="../assets/common/headerMenu{{user_role}}.html" />
<headermenu template="../assets/common/headerMenu{{user_role}}.html" />


angular.module("directives")
.directive("headermenu", function() {
  return {
    restrict: "EA",
    scope: true,
    templateUrl: function (element, attr) {
      return attr.template;
    },
    link: function(scope, iElement, iAttrs, controller) {
      ....
    }
  };
});