Tôi không thể sử dụng $ ctrl. trong mẫu thành phần góc

Question

Tôi đang sử dụng góc 1,5 và tôi muốn trích xuất một phần DOM của mình thành một component.
Dưới đây là những gì tôi đã làm cho đến nay:

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

Và mẫu trông giống như vậy:

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

Tôi sử dụng thành phần này (! Xa xong) như sau:

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

Tôi có ba câu hỏi chính tôi đoán:

1. Tại sao tôi phải sử dụng $ctrl ở mọi nơi trong mẫu của mình? Có $scope vậy tại sao tất cả các ràng buộc đi đến $ctrl thay vì $scope? Và có cách nào để thay đổi điều này không?
2. Tôi có thể bằng cách nào đó có các giá trị như $index, $first và $last được chuyển vào không? Dường như với tôi như nó là một "bơ bơ" để truyền chúng vào ...
3. Đây có phải là phương pháp phù hợp không? Hoặc tôi nên sử dụng chỉ thị? Tôi biết các thành phần có phạm vi phân lập và các chỉ thị có thể có phạm vi không bị cô lập. nhưng tôi có thể trộn/kết hợp trong một chỉ thị (chia sẻ phạm vi với bộ điều khiển, nhưng cũng thêm các chức năng của riêng tôi để chỉ sử dụng trong chỉ thị/mẫu?)

Cảm ơn sự giúp đỡ của bạn.

Answer 1

Tại sao tôi phải sử dụng $ ctrl ở mọi nơi trong mẫu của mình? Có phạm vi $ vậy tại sao tất cả các ràng buộc đi tới $ ctrl chứ không phải là $ scope? Và có cách nào để thay đổi điều này không?

Phạm vi $ sẽ biến mất với góc 2.0. Bạn không có nghĩa vụ phải sử dụng $ ctrl. Tôi khuyên bạn vẫn nên sử dụng "controllerAs" với bộ điều khiển có tên, để tránh nhầm lẫn bên trong các mẫu của bạn.

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

và sau đó:

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

sử dụng các biến giáp của bạn bên trong điều khiển của bạn, bạn phải sử dụng this:

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

Tôi có thể bằng cách nào đó có giá trị như $ index, $ đầu tiên và $ cuối qua? Nó dường như với tôi giống như nó là một "bơ bơ" để chuyển chúng vào ...

Tôi thực sự không hiểu làm thế nào bạn muốn chúng được thông qua.

Đây có phải là phương pháp phù hợp không? Hoặc tôi nên sử dụng chỉ thị?

Khi bạn đang đối mặt với ứng dụng có thể được hiển thị dưới dạng cây thành phần, các thành phần là tùy chọn tốt nhất.