Comment conditionnellement appliquer un modèle personnalisé via Angulaire directives?

DÉMO

Envisager la directive suivante:

angular.module('MyApp').directive('maybeLink', function() {
  return {
    replace: true,
    scope: {
      maybeLink: '=',
      maybeLinkText: '='
    },
    template: '<span>' + 
              '  <span ng-hide="maybeLink" ng-bind-html="text"></span>' +
              '  <a ng-show="maybeLink" href="#" ng-bind-html="text"></a>' +
              '</span>',
    controller: function($scope) {
      $scope.text = $scope.maybeLinkText.replace(/\n/g, '<br>');
    }
  }; 
});

La directive ajoute à la fois la <span> et la <a> vers les DOM (une seule est visible à un moment donné).

Comment pourrais-je la réécriture de la directive telle qu'il va ajouter soit <span> ou <a> pour les DOM, mais pas les deux?

Mise à JOUR

OK, je suppose que je pourrais utiliser ng-if comme ça:

template: '<span>' + 
          '  <span ng-if="!maybeLink" ng-bind-html="text"></span>' +
          '  <a ng-if="maybeLink" href="#" ng-bind-html="text"></a>' +
          '</span>'

Mais, comment pourrait-on se débarrasser de l'entourage <span> dans ce cas?

Mise à JOUR 2

Ici est une version de la directive qui utilise $compile. Il n'a pas l'entourant <span>, mais les deux sens de la liaison de données ne fonctionne pas non plus. Je suis vraiment intéressé de savoir comment résoudre la double liaison de données de la question. Des idées?

DÉMO

angular.module('MyApp').directive('maybeLink', function($compile) {
  return {
    scope: {
      maybeLink: '=',
      maybeLinkText: '='
    },
    link: function(scope, element, attrs) {
      scope.text = scope.maybeLinkText.replace(/\n/g, '<br>');

      if (scope.maybeLink) {
        element.replaceWith($compile('<a href="#" ng-bind-html="text"></a>')(scope));
      } else {
        element.replaceWith($compile('<span ng-bind-html="text"></span>')(scope));  
      } 
    } 
  }; 
});
  • Voulez-vous toujours de liaison dynamique, c'est à dire lorsque la valeur de maybeLink changements, l'autre élément qui doit s'afficher? Ou avez-vous besoin d'un temps de rendu (si maybeLink est vrai au moment du rendu de l'illustrer, d'autre spectacle que)?
  • Je n'ai pas vraiment besoin de la dynamique de la liaison de données. Est-ce à faciliter la mise en œuvre?
  • j'ai édité ma réponse, semble travail, malade ajouter le lien à Plunker
InformationsquelleAutor Misha Moroshko | 2013-09-19
  1. 43

    Vous pourriez être en mesure d'utiliser un template fonction. Selon le docs:

    Vous pouvez spécifier le modèle comme une chaîne de caractères représentant le modèle ou comme un fonction qui prend deux arguments tElement et tAttrs (décrit dans la compilation de la fonction api ci-dessous) et retourne une chaîne de caractères représentant le modèle.

    function resolveTemplate(tElement, tAttrs) {

}

angular.module('MyApp').directive('maybeLink', function() {
  return {
    //...
    template: resolveTemplate,
    //...
  }; 
});
    • C'est la solution la plus propre. Je l'aime. Tant que vous n'avez pas besoin d'accéder à scope, bien sûr.
    • Cela ressemble beaucoup. Comment voulez-vous de les annoter, de sorte que vous pouvez l'utiliser avec des annotations / ng-strict-di?
    InformationsquelleAutor Behrang
  2. 31

    Je pense que c'est la façon la plus propre à injecter un modèle dynamique basé sur une portée de propriété

    angular.module('app')
.directive('dynamic-template', function () {
  return {
    template:'<ng-include src="template"/>',
    restrict: 'E',
    link: function postLink(scope) {
      scope.template = 'views/dynamic-'+scope.type+'.html';
    }
  };
})
    • J'ai utilisé celui-ci et l'a obtenu et en cours d'exécution en secondes... pourquoi tant de lignes de code si vous pouvez obtenir quelque chose de court et doux mais simple et efficace.. bravo bravo
    • Doit être accepté de répondre. J'ai dû ajouter un isolé portée (voir la section sous scope) pour faire mon directive réutilisable pour les différents composants, mais c'est la réponse à la question.
    • Il y a un énorme différence entre cette solution et la solution d'appeler resolveTemplate, la première est STATIQUE et ne peut pas utiliser le modèle réel des valeurs. Celui-ci fonctionne super. Ce que je n'étais pas au courant, c'est que partielle inclus via ng-inclure, a un accès correct à la portée. Merci beaucoup à l'auteur de ce
    • C'est une très belle solution! Cependant, je voudrais utiliser transclude: true et puis ng-transclude dans l' (dynamique) modèle. Cela ne fonctionne pas, angulaire génère une erreur: Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. quelqu'un a une idée, comment résoudre cela?
    InformationsquelleAutor yohairosen
  3. 5

    Je suis venu avec la version suivante à la fin:

    angular.module('MyApp').directive('maybeLink', function($compile) {
  return {
    scope: {
      maybeLink: '=',
      maybeLinkText: '='
    },
    link: function(scope, element, attrs) {
      scope.$watch('maybeLinkText', function(newText) {
        scope.text = newText.replace(/\n/g, '<br>');
      });

      scope.$watch('maybeLink', function() {
        var newElement;

        if (scope.maybeLink) {
          newElement = $compile('<a href="#" ng-bind-html="text"></a>')(scope);
        } else {
          newElement = $compile('<span ng-bind-html="text"></span>')(scope);
        }

        element.replaceWith(newElement); //Replace the DOM
        element = newElement;            //Replace the 'element' reference
      });
    }
  };
});
    InformationsquelleAutor Misha Moroshko
  4. 3

    Je voudrais utiliser ng-switch.

    quelque chose comme 

     template: '<span ng-switch on="maybeLink">' + 
          '  <span ng-switch-when="http://www.yahoo.com" ng-bind-html="text"></span>' +
          '  <a ng-switch-when="http://google.com" href="#" ng-bind-html="text"></a>' +
          '</span>',

    ou

     template: '<span ng-switch on="maybeLink">' + 
          '  <span ng-switch-when={{maybeLink.length == 0}} ng-bind-html="text"></span>' +
          '  <a ng-switch-when={{maybeLink.length > 0}} href="#" ng-bind-html="text"></a>' +
          '</span>',

    Donc, c'est la direction

    Plunker

    InformationsquelleAutor Maxim Shoustin
  5. 2

    Vous pouvez utiliser ng-si, pour la même

    Ci-dessous est l'exemple


    Travail De Démonstration

    Directive Code:

    angular.module('MyApp').directive('maybeLink', function() {
  return {
    replace: true,
    scope: {
      maybeLink: '=',
      maybeLinkText: '='
    },
    template: '<span>' + 
              '  <span ng-if="!maybeLink.link" ng-bind-html="text"></span>' +
              '  <a ng-if="maybeLink.link" href="#" ng-bind-html="text"></a>' +
              '</span>',
    controller: function($scope) {
      $scope.text = $scope.maybeLinkText.replace(/\n/g, '<br>');
    }
  }; 
});
    • C'est exactement ce que je suis venu avec. Voir le mise à JOUR ci-dessus. Une idée de comment se débarrasser de l'entourage <span>?
    InformationsquelleAutor JQuery Guru
  6. 1

    La suite est une solution qui fournit des mises à jour dynamiques. Utilisation:

    <a rewrite-as-span="true"></a>

    <a rewrite-as-span="false"></a>

    <a rewrite-as-span="yourFn()"></a>

    etc. 

    app.directive('rewriteAsSpan', function($compile){
  return {
    restrict: 'A',
    template: '<span />',
    replace: true,

    //we transclude the element because when it gets replaced with the span
    //we want all the properties from the original element
    transclude: 'element',

    compile: function(tElement, tAttrs){

      return {
        post: function(scope, element, attrs, controller, transclude){
          var rewrittenEl, originalEl;

          transclude(scope, function(clone){
            originalEl = clone;
          });


          scope.$watch(attrs.rewriteAsSpan, function(value){
            if (value === undefined || value === true){
              if (!rewrittenEl){
                //lazy compile and cache the rewritten element
                transclude(scope, function(clone){
                  rewrittenEl = tElement;
                  rewrittenEl.html(clone.html());
                  //remove this directive because the $compile would get infinite
                  rewrittenEl.removeAttr('rewrite-as-span');
                  $compile(rewrittenEl)(scope);
                });

              }

              element.replaceWith(rewrittenEl);
              element = rewrittenEl;

            } else {
              element.replaceWith(originalEl);
              element = originalEl;
            }
          });

        }
      };
    }
  };
});

    Code et les spécifications comme un gist

    InformationsquelleAutor herr.kaste