Domanda Posso non usare $ ctrl. nel modello di componente angolare


Sto usando angular 1.5 e volevo estrarre parte del mio DOM in a componente.
Ecco cosa ho fatto finora:

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

E il modello sembra così:

<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>

Io uso questo componente (tutt'altro che finito!) In questo modo:

<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>

Ho tre domande principali che immagino:

  1. Perché devo usare $ctrl ovunque nel mio modello? C'è $scope quindi perché tutti i binding vanno a $ctrl piuttosto che $scope? E c'è un modo per cambiare questo?
  2. Posso avere in qualche modo valori come $index, $first e $last passato dentro? Mi sembra che sia un "burro burroso" per passarli in ...
  3. È questo l'approccio giusto? O dovrei usare direttiva? So che i componenti hanno un ambito isolato e le direttive possono avere un ambito non isolato. ma potrei mescolare / abbinare in una direttiva (condividere l'ambito con il controller, ma aggiungere anche le mie funzioni da utilizzare solo in direttive / template?)

Grazie per l'aiuto.


11
2018-02-25 13:05


origine


risposte:


Perché devo usare $ ctrl ovunque nel mio modello? C'è $ scope   quindi perché tutti i binding vanno a $ ctrl anziché $ scope? E c'è a   modo per cambiare questo?

$ scope scomparirà con angular 2.0. Non sei obbligato a usare $ ctrl. Ti consiglio di utilizzare ancora "controllerAs" con un controller nominato, al fine di evitare confusione all'interno dei tuoi modelli.

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

e poi :

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

per utilizzare le variabili limitate all'interno del controller, è necessario utilizzare this :

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

Posso avere in qualche modo valori come $ index, $ first e $ last in? esso   mi sembra come se fosse un "burro burroso" per passarli in ...

Non capisco davvero come vuoi che vengano passati.

È questo l'approccio giusto? O dovrei usare direttiva?

Quando stai affrontando un'applicazione che può essere visualizzata come un albero di componenti, i componenti sono l'opzione migliore.


15
2018-02-25 13:25