Je ne peux pas utiliser $ctrl. dans angulaire du modèle de composant

Je suis en utilisant angulaire 1.5 et j'ai voulu 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>

- Je utiliser ce composant (loin d'être fini!) comme:

<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 template? Il est $scope alors pourquoi toutes les liaisons aller à $ctrl plutôt que $scope? Et est-il un moyen de changer cela?
  2. Je peux en quelque sorte avoir des valeurs comme $index, $first et $last passé? Il me semble que c'est un "beurre de beurre de" passer dans...
  3. Est-ce vraiment la bonne solution? Ou dois-je utiliser la directive? Je sais que les composants ont isolé la portée et les directives n'ont pas isolé de la portée. mais pourrais-je mélanger et correspondre à une directive (part de la portée avec le contrôleur, mais aussi d'ajouter mes propres fonctions pour être utilisé dans la directive/modèle?)

Merci pour votre aide.

Un commentaire serait bien si vous votez en bas?

OriginalL'auteur Daniel Gruszczyk | 2016-02-25

  1. 15

    Pourquoi dois-je utiliser $ctrl partout dans mon template? Il y a $portée
    alors, pourquoi toutes les liaisons aller à $ctrl plutôt que de portée? Et est-il un
    moyen de changer cela?

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

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

    et puis :

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

    pour utiliser votre borné de variables à l'intérieur de votre contrôleur, vous devez utiliser this :

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

    Je peux en quelque sorte avoir des valeurs comme le $index, $premier $et dernier passé? Il
    me semble que c'est un "beurre de beurre de" passer dans...

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

    Est-ce vraiment la bonne solution? Ou dois-je utiliser la directive?

    Lorsque vous êtes confronté à une demande qui peut être affiché comme un arbre de composants, les composants sont la meilleure option.

    Merci, je vais utiliser controllerAs pour plus de clarté. J'ai fini par le déplacement des fonctionnalités comme le déplacer vers le haut/vers le bas et de suppression à l'extérieur de l'élément, de sorte que je n'ai pas à passer $valeurs d'index et de nombreuses manifestations.

    OriginalL'auteur Deblaton Jean-Philippe