Ajouter les directives de la directive en AngularJS

Dans le cas où vous avez plusieurs directives sur un seul élément du DOM et où l'
l'ordre dans lequel ils sont appliqués des questions, vous pouvez utiliser le priority propriété à l'ordre de leur
application. Les numéros les plus élevés exécuter en premier. La priorité par défaut est 0 si vous ne spécifiez pas un.

MODIFIER: après la discussion, voici la complète solution de travail. La clé était de supprimer l'attribut: element.removeAttr("common-things");, et aussi element.removeAttr("data-common-things"); (dans le cas des utilisateurs de spécifier data-common-things dans le code html)

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false, 
      terminal: true, //this setting is important, see explanation below
      priority: 1000, //this setting is important, see explanation below
      compile: function compile(element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {  },
          post: function postLink(scope, iElement, iAttrs, controller) {  
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

De travail plunker est disponible à: http://plnkr.co/edit/Q13bUt?p=preview

Ou:

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000,
      link: function link(scope,element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        $compile(element)(scope);
      }
    };
  });

DÉMO

Explication des raisons pour lesquelles nous avons à mettre en terminal: true et priority: 1000 (un grand nombre):

Lorsque le DOM est prêt, angulaire marche dans les DOM pour identifier tous les inscrits de directives et de compiler les directives basée sur priority si ces directives sont sur le même élément. Nous avons mis notre coutume de la directive en priorité à un nombre élevé afin de s'assurer qu'il sera compilé première et avec terminal: true, les autres directives seront sauté après cette directive est compilé.

Lors de notre coutume directive est compilé, il va modifier l'élément par l'ajout de directives et de suppression de lui-même et d'utiliser $compiler service à compiler toutes les directives (y compris ceux qui ont été ignorés).

Si nous ne fixons pas les terminal:true et priority: 1000, il ya une chance que certaines directives sont compilés avant notre coutume directive. Et quand notre coutume directive utilise $compiler compiler l'élément => compiler à nouveau la déjà établi des directives. Cela va provoquer un comportement imprévisible, surtout si les directives compilé avant notre coutume directive ont déjà transformé les DOM.

Pour plus d'informations à propos de la priorité et de terminal, découvrez Comment comprendre le "terminal" de la directive?

Un exemple d'une directive qui modifie également le modèle est ng-repeat (priorité = 1000), lorsque ng-repeat est compilé, ng-repeat faire des copies de l'élément de modèle, avant que d'autres directives appliquées.

Grâce à @Izhaki commentaire, voici la référence à ngRepeat code source: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js

Voici une solution qui déplace les directives qui doivent être ajoutés de façon dynamique, dans le point de vue et ajoute également une option (de base), à la condition logique. Ce qui maintient la directive propre, sans codée en dur de la logique.

La directive prend un tableau d'objets, chaque objet contient le nom de la directive, l'ajout de la valeur à transmettre à celle-ci (le cas échéant).

J'avais du mal à penser à un cas d'utilisation pour une directive comme cela jusqu'à ce que j'ai pensé qu'il pourrait être utile d'ajouter de la logique conditionnelle qui n'ajoute qu'une directive basée sur une condition (si la réponse ci-dessous est toujours fictive). J'ai ajouté une option de if propriété que doit contenir une valeur booléenne, de l'expression ou de la fonction (par exemple défini dans votre controller) qui détermine si la directive doit être ajouté ou non.

Je suis également en utilisant attrs.$attr.dynamicDirectives d'obtenir la déclaration d'attribut utilisé pour ajouter de la directive (par exemple,data-dynamic-directive, dynamic-directive) sans coder en dur les valeurs de chaîne à vérifier.

Plunker Démo

JS:

angular.module('plunker', ['ui.bootstrap'])
.controller('DatepickerDemoCtrl', ['$scope',
function($scope) {
$scope.dt = function() {
return new Date();
};
$scope.selects = [1, 2, 3, 4];
$scope.el = 2;
//For use with our dynamic-directive
$scope.selectIsRequired = true;
$scope.addTooltip = function() {
return true;
};
}
])
.directive('dynamicDirectives', ['$compile',
function($compile) {
var addDirectiveToElement = function(scope, element, dir) {
var propName;
if (dir.if) {
propName = Object.keys(dir)[1];
var addDirective = scope.$eval(dir.if);
if (addDirective) {
element.attr(propName, dir[propName]);
}
} else { //No condition, just add directive
propName = Object.keys(dir)[0];
element.attr(propName, dir[propName]);
}
};
var linker = function(scope, element, attrs) {
var directives = scope.$eval(attrs.dynamicDirectives);
if (!directives || !angular.isArray(directives)) {
return $compile(element)(scope);
}
//Add all directives in the array
angular.forEach(directives, function(dir){
addDirectiveToElement(scope, element, dir);
});
//Remove attribute used to add this directive
element.removeAttr(attrs.$attr.dynamicDirectives);
//Compile element to run other directives
$compile(element)(scope);
};
return {
priority: 1001, //Run before other directives e.g.  ng-repeat
terminal: true, //Stop other directives running
link: linker
};
}
]);

HTML:

<!doctype html>
<html ng-app="plunker">
<head>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div data-ng-controller="DatepickerDemoCtrl">
<select data-ng-options="s for s in selects" data-ng-model="el" 
data-dynamic-directives="[
{ 'if' : 'selectIsRequired', 'ng-required' : '{{selectIsRequired}}' },
{ 'tooltip-placement' : 'bottom' },
{ 'if' : 'addTooltip()', 'tooltip' : '{{ dt() }}' }
]">
<option value=""></option>
</select>
</div>
</body>
</html>

Essayez de stocker l'état dans un attribut de l'élément lui-même, comme superDirectiveStatus="true"

Par exemple:

angular.module('app')
.directive('superDirective', function ($compile, $injector) {
return {
restrict: 'A',
replace: true,
link: function compile(scope, element, attrs) {
if (element.attr('datepicker')) { //check
return;
}
var status = element.attr('superDirectiveStatus');
if( status !== "true" ){
element.attr('datepicker', 'someValue');
element.attr('datepicker-language', 'en');
//some more
element.attr('superDirectiveStatus','true');
$compile(element)(scope);
}
}
};
});

J'espère que cela vous aide.

Une solution simple qui peut, dans certains cas, est de créer et de $compiler un wrapper puis ajouter l'original de votre élément.

Quelque chose comme...

link: function(scope, elem, attr){
var wrapper = angular.element('<div tooltip></div>');
elem.before(wrapper);
$compile(wrapper)(scope);
wrapper.append(elem);
}

Cette solution a l'avantage qu'il garde les choses simples, pas la recompilation de l'élément d'origine.

Ceci ne fonctionnerait pas si tout de la valeur ajoutée de la directive require un de l'original de l'élément de directives ou si l'élément d'origine a un positionnement absolu.