Posso non usare $ ctrl. nel modello di componente angolare

Question

Sto usando angular 1.5 e volevo estrarre parte del mio DOM in un component.
Ecco quello che 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 si presenta in questo modo:

<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 questa componente (! Lungi dall'essere compiuto) 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:

1. Perché devo usare $ctrl ovunque nel mio modello? C'è $scope quindi perché tutti i binding vanno a $ctrl anziché a $scope? E c'è un modo per cambiare questo?
2. Posso passare in qualche modo valori come $index, $first e $last? Mi sembra che sia un "burro da burro" 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 all'interno di direttiva/modello?)

Grazie per il vostro aiuto.

Answer 1

Perché devo usare $ ctrl ovunque nel mio modello? C'è $ scope quindi perché tutti i binding vanno a $ ctrl anziché $ scope? E c'è un 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 usare le variabili delimitate all'interno del controllore, è necessario utilizzare this:

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

Posso in qualche modo avere valori come indice di $, $ prima e $ ultimi passati? E mi sembra come se fosse un "burro burrosa" per passarli in ...

Io non capisco come si desidera loro di essere passato.

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

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