Lien vs comstackr vs contrôleur

Lorsque vous créez une directive, vous pouvez insérer du code dans le compilateur, la fonction de lien ou le contrôleur.

Dans les docs, ils expliquent que:

  • la fonction de compilation et de liaison est utilisée dans différentes phases du cycle angular
  • les contrôleurs sont partagés entre les directives

Cependant, pour moi, ce n’est pas clair, quel type de code devrait aller où.

Par exemple, est-ce que je peux créer des fonctions dans la compilation et les attacher à la scope dans link ou seulement attacher des fonctions à la scope dans le contrôleur?

Comment les contrôleurs sont-ils partagés entre les directives, si chaque directive peut avoir son propre contrôleur? Les contrôleurs sont-ils réellement partagés ou ne sont-ils que des propriétés de scope?

Comstackr :

C’est la phase où Angular comstack réellement votre directive. Cette fonction de compilation est appelée une seule fois pour chaque référence à la directive donnée. Par exemple, disons que vous utilisez la directive ng-repeat. ng-repeat devra rechercher l’élément auquel il est attaché, extraire le fragment HTML auquel il est attaché et créer une fonction de modèle.

Si vous avez utilisé HandleBars, des modèles de soulignement ou l’équivalent, c’est comme si vous compiliez leurs modèles pour extraire une fonction de modèle. Pour cette fonction de modèle, vous transmettez des données et la valeur renvoyée par cette fonction est le code HTML contenant les données aux bons endroits.

La phase de compilation est cette étape dans Angular qui renvoie la fonction template. Cette fonction de modèle en angular est appelée fonction de liaison.

Phase de liaison:

La phase de liaison est l’endroit où vous attachez les données ($ scope) à la fonction de liaison et vous devez retourner le fichier HTML lié. Étant donné que la directive spécifie également où ce fichier HTML va ou ce qu’il change, il est déjà bon d’y aller. C’est la fonction où vous voulez apporter des modifications au code HTML lié, c.-à-d. Le code HTML qui contient déjà les données. En angular si vous écrivez du code dans la fonction de liaison c’est généralement la fonction post-lien (par défaut). C’est un peu un rappel qui est appelé après que la fonction de liaison a lié les données au modèle.

Manette :

Le contrôleur est un endroit où vous placez une logique spécifique à une directive. Cette logique peut également entrer dans la fonction de liaison, mais il faudrait alors mettre cette logique sur la scope pour la rendre “partageable”. Le problème avec cela est que vous corrompriez alors la scope de vos directives, ce qui n’est pas vraiment une chose attendue. Alors, quelle est l’alternative si deux directives veulent se parler / coopérer entre elles? Bien sûr, vous pouvez mettre toute cette logique dans un service et ensuite faire en sorte que ces deux directives dépendent de ce service, mais cela ne fait qu’apporter une dépendance supplémentaire. L’alternative est de fournir un contrôleur pour cette scope (généralement isoler la scope?), Puis ce contrôleur est injecté dans une autre directive lorsque cette directive “nécessite” l’autre. Voir les tabs et les volets sur la première page de angularjs.org pour un exemple.

Je voulais aussi append ce que le livre O’Reily AngularJS de Google Team a à dire:

Contrôleur – Créez un contrôleur qui publie une API pour communiquer entre les directives. Un bon exemple est la directive sur la communication directive

Lien – Modifiez par programmation les instances d’élément DOM résultantes, ajoutez des écouteurs d’événement et configurez la liaison de données.

Comstackr – Modifiez par programme le modèle DOM pour les entités à travers les copies d’une directive, comme s’il était utilisé dans ng-repeat. Votre fonction de compilation peut également renvoyer des fonctions de lien pour modifier les instances d’éléments résultantes.

Une directive vous permet d’étendre le vocabulaire HTML de manière déclarative pour créer des composants Web. L’atsortingbut ng-app est une directive, ainsi que ng-controller et tous les ng- prefixed atsortingbutes . Les directives peuvent être des atsortingbutes , des tags ou même class names class , des comments .

Comment naissent les directives ( compilation et instantiation )

Comstackr: Nous utiliserons la fonction de comstack pour manipulate le DOM avant son rendu et renvoyer une fonction de link (qui gèrera la liaison pour nous). C’est aussi l’endroit où mettre toutes les méthodes à partager avec toutes les instances de cette directive.

link: Nous utiliserons la fonction link pour enregistrer tous les écouteurs sur un élément DOM spécifique (qui est cloné à partir du modèle) et configurer nos liaisons sur la page.

Si elles sont définies dans la fonction comstack() , elles n’auraient été définies qu’une seule fois (ce qui est souvent ce que vous voulez). Si elles sont définies dans la fonction link() , elles seront définies chaque fois que l’élément HTML est lié aux données du fichier.
object.

 
Inner content
app.directive("simple", function(){ return { ressortingct: "EA", transclude:true, template:"
{{label}}
", comstack: function(element, atsortingbutes){ return { pre: function(scope, element, atsortingbutes, controller, transcludeFn){ }, post: function(scope, element, atsortingbutes, controller, transcludeFn){ } } }, controller: function($scope){ } }; });

Comstack fonction de Comstack retourne la fonction de pre et post lien. Dans la fonction de pré-lien, nous avons le modèle d’instance et la scope du controller , mais le modèle n’est pas lié à la scope et n’a toujours pas de contenu exclu.

Post fonction post-lien est l’endroit où le post-lien est la dernière fonction à exécuter. Maintenant que la transclusion est terminée, the template is linked to a scope et la view will update with data bound values after the next digest cycle . L’option de link est juste un raccourci pour configurer une post-link .

controller: le contrôleur de directive peut être passé à une autre phase de liaison / compilation. Il peut être injecté dans d’autres directives comme moyen d’utilisation dans la communication inter-directive.

Vous devez spécifier le nom de la directive à exiger – Il doit être lié au même élément ou à son parent. Le nom peut être préfixé par:

 ? – Will not raise any error if a mentioned directive does not exist. ^ – Will look for the directive on parent elements, if not available on the same element. 

Utilisez les crochets ['directive1′, 'directive2′, 'directive3′] pour exiger un contrôleur à plusieurs directives.

 var app = angular.module('app', []); app.controller('MainCtrl', function($scope, $element) { }); app.directive('parentDirective', function() { return { ressortingct: 'E', template: '', controller: function($scope, $element){ this.variable = "Hi Vinothbabu" } } }); app.directive('childDirective', function() { return { ressortingct: 'E', template: '

I am child

', replace: true, require: '^parentDirective', link: function($scope, $element, attr, parentDirectCtrl){ //you now have access to parentDirectCtrl.variable } } });

En outre, une bonne raison d’utiliser une fonction de contrôleur ou de lien (puisqu’ils ont tous deux access à la scope, à l’élément et à attrs) est que vous pouvez transmettre n’importe quel service ou dépendance disponible dans un contrôleur (et dans n’importe quel ordre). vous ne pouvez pas faire cela avec la fonction de lien. Notez les différentes signatures:

 controller: function($scope, $exceptionHandler, $attr, $element, $parse, $myOtherService, someCrazyDependency) {... 

contre.

 link: function(scope, element, attrs) {... //no services allowed 

c’est un bon exemple pour comprendre les phases de la directive http://codepen.io/anon/pen/oXMdBQ?editors=101

 var app = angular.module('myapp', []) app.directive('slngStylePrelink', function() { return { scope: { drctvName: '@' }, controller: function($scope) { console.log('controller for ', $scope.drctvName); }, comstack: function(element, attr) { console.log("comstack for ", attr.name) return { post: function($scope, element, attr) { console.log('post link for ', attr.name) }, pre: function($scope, element, attr) { $scope.element = element; console.log('pre link for ', attr.name) // from angular.js 1.4.1 function ngStyleWatchAction(newStyles, oldStyles) { if (oldStyles && (newStyles !== oldStyles)) { forEach(oldStyles, function(val, style) { element.css(style, ''); }); } if (newStyles) element.css(newStyles); } $scope.$watch(attr.slngStylePrelink, ngStyleWatchAction, true); // Run immediately, because the watcher's first run is async ngStyleWatchAction($scope.$eval(attr.slngStylePrelink)); } }; } }; }); 

html

  
  • comstack : utilisé lorsque nous devons modifier un modèle de directive, comme append une nouvelle expression, append une autre directive dans cette directive
  • controller : utilisé lorsque nous avons besoin de partager / réutiliser des données $ scope
  • link : c’est une fonction utilisée pour attacher un gestionnaire d’événement ou pour manipuler un DOM.