निर्देशों के बीच एक गुंजाइश को कैसे रोकें एन कोणीय?

Question

मेरे सभी निर्देश एक ही दायरे का उपयोग करते हैं और मैं अपने निर्देशों को स्वयं ही संचालित करना चाहता हूं।

निर्देशक:

app.directive('headerSort', function() { 
    return { 
     restrict: 'A', 
     controller: function ($scope, $element, $attrs) { 
      $scope.caption = $attrs.caption; 

      $scope.doSort = function() { 
       $scope.orderField = $attrs.headerSort; 
       $scope.reverse = !$scope.reverse; 
      }; 
     }, 
     template: '<div data-ng-click="doSort();">' + 
        '{{caption}}' + 
        '<i class="icon-sort"></i>' + 
        '</div>' 
    }; 
}); 

एचटीएमएल:

<th data-header-Sort="FullName" data-caption="Full name"></th> 
<th data-header-Sort="FirsName" data-caption="First name"></th> 
<th data-header-Sort="Age" data-caption="Age"></th> 

नतीजा यह है कि सभी स्तंभों मूल्य 'उम्र' और तरह उम्र से है। मैं निश्चित रूप से चाहता हूं कि हर कॉलम अपने स्वयं के कॉलम को सॉर्ट करें। इसे कैसे प्राप्त किया जा सकता है?

अद्यतन: कि orderField और reverseng-repeat | orderBy में किया जाता है उल्लेख करने के लिए भूल:

<tbody id="customerRows" data-ng-repeat="customer in customers | orderBy:orderField:reverse"> 

Answer 1

आपके निर्देश के प्रत्येक उदाहरण में अपना स्वयं का कैप्शन, सॉर्ट प्रकार और रिवर्स प्रॉपर्टी होना आवश्यक है। तो निर्देश को अपने स्वयं के (बच्चे) दायरे — या तो एक अलग दायरा (scope: {}) या एक नया दायरा (scope: true) की आवश्यकता होगी। चूंकि निर्देश एक स्टैंडअलोन/स्वयं निहित घटक नहीं है, इसलिए मैं एक अलग दायरे का उपयोग नहीं करता (When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope? भी देखें)।

निर्देश के लिए चुने गए दायरे के प्रकार के साथ

, प्रकार के प्रकार और रिवर्स मूल्यों समारोह तर्क के माध्यम से माता-पिता के लिए पारित किया जा सकता है, या वे सीधे माता पिता गुंजाइश पर सेट किया जा सकता। मैं समारोह तर्क सुझाव देते हैं:

app.directive('headerSort', function() { 
    return { 
     scope: true, // creates a new child scope 
     link: function (scope, element, attrs) { 
      scope.caption = attrs.caption; 
      scope.sortType = attrs.headerSort; 
      scope.reverse = false; 
     }, 
     template: '<div data-ng-click="reverse=!reverse; doSort(sortType, reverse);">' + 
      '{{caption}}</div>' 
    }; 
}); 

function MyCtrl($scope) { 
    $scope.orderField = "FirstName"; 
    $scope.reverse = false; 
    $scope.customers = [ {FirstName: 'Martijn', Age: 22}, {FirstName: 'Mark', Age: 44}]; 
    $scope.doSort = function (sortType, reverse) { 
     console.log('sorting',sortType, reverse); 
     $scope.orderField = sortType; 
     $scope.reverse = reverse; 
    }; 
} 

<table> 
    <th data-header-sort="FirstName" data-caption="First name"></th> 
    <th data-header-sort="Age" data-caption="Age"></th> 
    <tbody id="customerRows" data-ng-repeat="customer in customers | orderBy:orderField:reverse"> 
     <tr><td>{{customer.FirstName}}<td>{{customer.Age}} 
    </tbody> 
</table> 

fiddle बेला में, बस सादगी के लिए, मैं FullName कॉलम शामिल नहीं किया था।

Answer 2

आप अपने दायरे "को अलग" की जरूरत है। यह निर्देश के प्रत्येक उदाहरण को अपना दायरा देगा। अपने निर्देश परिभाषा के लिए निम्न जोड़ें:

scope: {}, 

तो, अपने अंतिम निर्देश परिभाषा इस प्रकार दिखाई देगा:

app.directive('headerSort', function() { 
    return { 
     restrict: 'A', 
     scope: {}, 
     controller: function ($scope, $element, $attrs) { 
      $scope.caption = $attrs.caption; 

      $scope.doSort = function() { 
       $scope.orderField = $attrs.headerSort; 
       $scope.reverse = !$scope.reverse; 
      }; 
     }, 
     template: '<div data-ng-click="doSort();">' + 
        '{{caption}}' + 
        '<i class="icon-sort"></i>' + 
        '</div>' 
    }; 
}); 

Egghead.io वीडियो गहराई में गुंजाइश अलगाव के लिए जाना। आप उन्हें यहां देख सकते हैं: http://www.egghead.io/

पृथक स्कोप वीडियो ट्यूटोरियल # 16 से शुरू होते हैं।