web-dev-qa-db-fra.com

Puis-je ne pas utiliser $ ctrl. dans angular

J'utilise angular 1.5 et je voulais extraire une partie de mon DOM dans un composant .
Voici ce que j'ai fait jusqu'à présent:

angular.module('my-app').component("menuItem",{
    templateUrl : "lib/menu-item.tmpl.html",
    bindings : {
        index : "<",
        first : "<",
        last : "<",
        item : "=",
        onDelete : "&",
        onMoveUp : "&",
        onMoveDown : "&"
    },
    controller : function($scope) {
    }
});

Et le modèle ressemble à ceci:

<div>
    <aside class="sort-buttons">
        <ul>
            <li>
                <button ng-click="$ctrl.onMoveUp({index : $ctrl.index})"
                        ng-disabled="$ctrl.first">
                    <i class="icon icon-up"></i>
                </button>
            </li>
            <li>
                <button ng-click="$ctrl.onMoveDown({index : $ctrl.index})"
                        ng-disabled="$ctrl.last">
                    <i class="icon icon-down"></i>
                </button>
            </li>
        </ul>
    </aside>

    <div class="row">
        <button class="btn btn-danger btn-icon btn-remove"
                ng-click="$ctrl.onDelete({index : $ctrl.index})">
            <i class="icon icon-remove"></i>
        </button>
    </div>
</div>

J'utilise ce composant (loin d'être terminé!) Comme ceci:

<section class="container menu">
    <menu-item index="$index" first="$first" last="$last" item="item"
            on-delete="removeItem(index)"
            on-move-up="moveItemUp(index)"
            on-move-down="moveItemDown(index)"
            ng-repeat="item in menu">
    </menu-item>
    <!-- some other display details of `$ctrl.item` -->
</section>

J'ai trois questions principales, je suppose:

  1. Pourquoi dois-je utiliser $ctrl partout dans mon modèle? Il y a $scope alors pourquoi toutes les liaisons vont à $ctrl plutôt que $scope? Et existe-t-il un moyen de changer cela?
  2. Puis-je avoir des valeurs comme $index, $first et $last passé? Il me semble que c'est un "beurre de beurre" pour les passer ...
  3. Est-ce même la bonne approche? Ou devrais-je utiliser une directive? Je sais que les composants ont une portée isolée et que les directives peuvent avoir une portée non isolée. mais pourrais-je mélanger/assortir dans une directive (partager la portée avec le contrôleur, mais aussi ajouter mes propres fonctions à utiliser uniquement dans la directive/le modèle?)

Merci de votre aide.

angularjsangularjs-directiveangularjs-scope
13
Daniel Gruszczyk

Pourquoi dois-je utiliser $ ctrl partout dans mon modèle? Il y a $ scope alors pourquoi toutes les liaisons vont à $ ctrl plutôt qu'à $ scope? Et existe-t-il un moyen de changer cela?

$ scope disparaîtra avec angular 2.0. Vous n'êtes pas obligé d'utiliser $ ctrl. Je vous recommande de toujours utiliser "controllerAs" avec un contrôleur nommé, afin d'éviter toute confusion à l'intérieur de vos modèles.

controllerAs: "menuItemCtrl",
controller : function($scope) {
},

puis :

            <button ng-click="menuItemCtrl.onMoveUp({index : menuItemCtrl.index})"
                    ng-disabled="menuItemCtrl.first">
                <i class="icon icon-up"></i>
            </button>

pour utiliser vos variables bornées dans votre contrôleur, vous devez utiliser this:

controller : function() {
    var self = this;
    // self.index contains your index
}

Puis-je avoir des valeurs comme $ index, $ first et $ last passées? Il me semble que c'est un "beurre de beurre" pour les passer ...

Je ne comprends pas vraiment comment vous voulez qu'ils soient adoptés.

Est-ce même la bonne approche? Ou devrais-je utiliser une directive?

Lorsque vous faites face à une application qui peut être affichée sous forme d'arborescence de composants, les composants sont la meilleure option.

15
Deblaton Jean-Philippe