angularjs - link - Lien vs compiler vs contrôleur




ng-bind (4)

En outre, une bonne raison d'utiliser un contrôleur par rapport à une fonction de liaison (puisqu'ils ont tous les deux accès à scope, element 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

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

Dans les docs, ils expliquent que:

  • fonction de compilation et de liaison sont utilisées dans différentes phases du cycle angulaire
  • 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: Puis-je créer des fonctions dans la compilation et les attacher à la portée dans le lien ou seulement attacher des fonctions à la portée 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 s'agit-il simplement des propriétés de la portée?


Je voulais également ajouter ce que le livre O'Reily AngularJS de l'équipe Google 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

Lien: modifiez par programme les instances d'éléments DOM résultantes, ajoutez des écouteurs d'événement et configurez la liaison de données.

Compiler - Modifiez par programme le modèle DOM pour les entités sur les copies d'une directive, comme lorsqu'il est utilisé dans ng-repeat. Votre fonction de compilation peut également renvoyer des fonctions de lien pour modifier les instances d'éléments résultantes.


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);
        },
        compile: function(element, attr) {
            console.log("compile 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

<body ng-app="myapp">
    <div slng-style-prelink="{height:'500px'}" drctv-name='parent' style="border:1px solid" name="parent">
        <div slng-style-prelink="{height:'50%'}" drctv-name='child' style="border:1px solid red" name='child'>
        </div>
    </div>
</body>

Compiler :

C'est la phase où Angular compile 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, dites 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 template.

Si vous avez utilisé HandleBars, les modèles de soulignement ou équivalent, c'est comme compiler leurs modèles pour extraire une fonction de modèle. Pour cette fonction de modèle, vous transmettez des données et la valeur de retour de cette fonction est le html avec les données dans les bons endroits.

La phase de compilation est cette étape dans Angular qui retourne la fonction template. Cette fonction de gabarit en angulaire s'appelle la 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 il devrait vous renvoyer le html lié. Puisque la directive spécifie également où va ce code html ou ce qu'il change, il est déjà bon d'y aller. C'est la fonction où vous voulez apporter des modifications au html lié, c'est-à-dire le html auquel les données sont déjà attachées. En angulaire si vous écrivez du code dans la fonction de liaison, c'est généralement la fonction post-lien (par défaut). C'est une sorte de rappel qui est appelé après que la fonction de liaison a lié les données avec le modèle.

Manette :

Le contrôleur est un endroit où vous mettez dans une certaine logique spécifique à la directive. Cette logique peut également entrer dans la fonction de liaison, mais vous devrez alors mettre cette logique sur la portée pour la rendre «partageable». Le problème avec cela est que vous corrompriez alors la portée avec vos trucs de directives, ce qui n'est pas vraiment quelque chose qui est attendu. Alors, quelle est l'alternative si deux directives veulent se parler / coopérer les unes avec les autres? Bien sûr, vous pouvez mettre toute cette logique dans un service, puis faire en sorte que ces deux directives dépendent de ce service, mais cela ne fait qu'ajouter une dépendance de plus. L'alternative est de fournir un contrôleur pour cette portée (généralement isoler la portée?) Et ensuite ce contrôleur est injecté dans une autre directive lorsque cette directive "nécessite" l'autre. Voir les onglets et les volets sur la première page de angularjs.org pour un exemple.







angularjs-directive