Come impedire che un ambito sia condiviso tra le direttive n Angolare?

Question

Tutte le mie direttive usano lo stesso scopo e voglio che le mie direttive funzionino da sole.

direttiva:

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> 

Il risultato è che tutte le colonne ha il valore di 'Age' e ordinare da Age. Voglio ovviamente che ogni colonna ordina la propria colonna. Come posso raggiungere questo obiettivo?

UPDATE: dimenticato di dire che orderField e reverse sono utilizzati nel ng-repeat | orderBy:

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

Answer 1

Ogni istanza della direttiva deve avere la propria didascalia, tipo di ordinamento e proprietà inversa. Pertanto, la direttiva avrà bisogno del proprio ambito (figlio) — un ambito isolato (scope: {}) o un nuovo ambito (scope: true). Poiché la direttiva non è un componente autonomo/autonomo, non utilizzerei un ambito isolato (vedere anche 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?).

Con il tipo di ambito selezionato per la direttiva, il tipo di ordinamento e i valori inversi possono essere passati al genitore tramite argomenti della funzione, oppure possono essere impostati direttamente sullo scope principale. Suggerisco argomenti delle funzioni:

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 Nel violino, solo per semplicità, non ho incluso la colonna FullName.

Answer 2

hai bisogno di "isolare" l'ambito. Questo darà a ciascuna istanza della direttiva il proprio ambito. Aggiungere il seguente alla definizione direttiva:

scope: {}, 

Quindi, la tua definizione direttiva finale sarebbe simile a questa: video

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

L'Egghead.io vanno in all'isolamento portata in profondità. Puoi visualizzarli qui: http://www.egghead.io/

I video di ambito isolato iniziano all'esercitazione # 16.