Jak zapobiec dzieleniu się zakresów między dyrektywami n Angular?

Question

Wszystkie moje dyrektywy używają tego samego zakresu i chcę, aby moje dyrektywy działały we własnym zakresie.

dyrektywa:

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>' 
    }; 
}); 

HTML:

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

Powoduje to, że wszystkie kolumny ma wartość 'wiek' i sortować według wieku. Oczywiście chcę, żeby każda kolumna sortowała własną kolumnę. Jak mogę to osiągnąć?

UPDATE: Zapomniałem wspomnieć, że orderField i reverse są wykorzystywane w ng-repeat | orderBy:

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

Answer 1

Każda instancja Twojej dyrektywy musi mieć własny podpis, rodzaj i odwrotność. W związku z tym dyrektywa będzie wymagać własnego (podrzędnego) zakresu (—) zakresu izolowanego (scope: {}) lub nowego zakresu (scope: true). Ponieważ dyrektywa nie jest samodzielnym/samodzielnym komponentem, nie używałbym zakresu izolowania (zob. Także 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?).

W przypadku rodzaju zakresu wybranego dla danej dyrektywy, typ sortowania i wartości odwrotne można przekazać rodzicowi za pośrednictwem argumentów funkcji lub można je ustawić bezpośrednio w zasobie nadrzędnym. Proponuję argumentów funkcji:

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 W skrzypcach, tylko dla uproszczenia, że ​​nie zawierają kolumnę FullName.

Answer 2

trzeba "odizolować" swój zakres. Dzięki temu każdy przypadek dyrektywy będzie miał swój własny zakres. Dodaj poniższe linie do definicji dyrektywy:

scope: {}, 

Więc twoja ostateczna definicja dyrektywa będzie wyglądać następująco: filmy

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 iść do izolacji zakres głębokości. Możesz je zobaczyć tutaj: http://www.egghead.io/

Pojedyncze filmy z zakresu rozpoczynają się od samouczka nr 16.