La directive angularjs définit l'URL du modèle dynamiquement

Je suis de la création d'une directive dont le modèle d'URL. Je veux définir le modèle d'URL dynamiquement en fonction de user_role. Une idée?

Heres mon directive code:

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

Et je veux mettre user_role à partir du contrôleur. Par exemple:

$scope.user_role = 1

source d'informationauteur Sachin Prasad

  1. 13

    Vous pouvez passer d'une fonction à la templateUrl option et de retourner une chaîne de caractères qui sera utilisée comme un modèle d'url à la fin.

    Tout d'abord attribuer un rôle sur l'élément comme un attribut (où userRole est lié à l'étendue):

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

    Ensuite, la directive peut lire:

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

    Mise à jour:
    Cela marchait avant avec l'ancienne version de Anguleux.

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

  2. 7

    vous pouvez manipuler ng-include comme un modèle

    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>'
  };
});

    démo: http://plnkr.co/edit/CCElZ317kYeZpa5ofmoo?p=preview

    Ou si vous ne souhaitez pas définir le chemin d'accès complet dans le contrôleur:

    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>'
  };
});

    démo: http://plnkr.co/edit/HEyUUzv6jbjZCDDbAzPm?p=preview

  3. 3

    Pourquoi ne pas le faire:

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

    alors:

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

    Si pas le mettre dans le balisage.

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