क्या मैं $ ctrl का उपयोग नहीं कर सकता। कोणीय घटक टेम्पलेट में

Question

मैं कोणीय 1.5 का उपयोग कर रहा हूं और मैं अपने डीओएम का हिस्सा component में निकालना चाहता था।
यहाँ मैं अब तक क्या किया है है:

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

और टेम्पलेट तो दिखाई देता है: इसलिए की तरह

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

मैं (से समाप्त हो गया अब तक!) इस घटक का उपयोग करें:

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

मेरे पास तीन मुख्य प्रश्न हैं जो मुझे लगता है:

1. मुझे अपने टेम्पलेट में हर जगह $ctrl का उपयोग क्यों करना है? $scope है तो $scope के बजाय सभी बाइंडिंग $ctrl पर क्यों जाती हैं? और क्या इसे बदलने का कोई तरीका है?
2. क्या मुझे किसी भी तरह $index, $first और $last जैसे मान हो सकते हैं? ऐसा लगता है कि यह उन्हें "बटररी मक्खन" है ...
3. क्या यह भी सही दृष्टिकोण है? या मैं निर्देश का उपयोग करना चाहिए? मुझे पता है कि घटकों के अलग-अलग गुंजाइश हैं, और निर्देशों में अलग-अलग गुंजाइश नहीं हो सकती है। लेकिन क्या मैं एक निर्देश में मिश्रण/मिलान कर सकता हूं (नियंत्रक के साथ दायरा साझा कर सकता हूं, लेकिन केवल निर्देश/टेम्पलेट के भीतर उपयोग किए जाने के लिए अपने स्वयं के कार्यों को भी जोड़ सकता हूं?)

आपकी सहायता के लिए धन्यवाद।

Answer 1

मुझे अपने टेम्पलेट में हर जगह $ ctrl का उपयोग क्यों करना है? $ स्कोप है तो क्यों सभी बाइंडिंग $ गुंजाइश के बजाय $ ctrl पर जाते हैं? और क्या यह बदलने के लिए तरीका है?

$ दायरा कोणीय 2.0 के साथ गायब हो जाएगा। आप $ ctrl का उपयोग करने के लिए बाध्य नहीं हैं। मैं अनुशंसा करता हूं कि आप अभी भी अपने टेम्पलेट्स के अंदर भ्रम से बचने के लिए नामित नियंत्रक के साथ "नियंत्रक एएस" का उपयोग करें।

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

और उसके बाद:

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

अपने नियंत्रक के अंदर अपने घिरा चर का उपयोग करने के लिए, आप this उपयोग करने के लिए:

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

मैं किसी भी तरह $ सूचकांक की तरह मान हो सकते हैं, $ पहले और $ आखिरी बार पास हो गए? यह मुझे लगता है जैसे कि यह एक "मक्खन मक्खन" उन्हें में पारित करने के लिए है ...

मैं सच में समझ में नहीं आता कि कैसे आप उन्हें पारित किया जा करना चाहते हैं।

क्या यह भी सही दृष्टिकोण है? या मैं निर्देश का उपयोग करना चाहिए?

जब आप किसी ऐसे अनुप्रयोग का सामना कर रहे हैं जिसे घटकों के पेड़ के रूप में प्रदर्शित किया जा सकता है, तो घटक सबसे अच्छा विकल्प हैं।