angularjs指令动态设置模板url

Question

我正在使用模板URL创建一个指令。我想根据user_role动态设置模板URL。有什么想法吗？

继承我的指令代码：

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

我想从控制器设置user_role。例如：

$scope.user_role = 1

Answer 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";
    }
  }
});

<强>更新 以前用于旧版Angular的工作。

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

Answer 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

Answer 3

为什么不这样做：

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

然后：

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

Answer 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) {
      ....
    }
  };
});