Wie verhindert man, dass ein Bereich zwischen den Direktiven geteilt wird? N Angular?

Question

Alle meine Direktiven verwenden den gleichen Bereich und ich möchte, dass meine Anweisungen selbstständig funktionieren.

Richtlinie:

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> 

Das Ergebnis ist, dass alle Spalten den Wert 'Alter' und sortieren nach Alter hat. Ich möchte natürlich, dass jede Spalte ihre eigene Spalte sortiert. Wie kann ich das erreichen?

UPDATE: vergessen zu erwähnen, dass orderField und reverse im ng-repeat | orderBy verwendet:

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

Answer 1

Jede Instanz Ihrer Anweisung muss eine eigene Beschriftung, einen eigenen Sortiertyp und eine umgekehrte Eigenschaft haben. Die Richtlinie benötigt also ihren eigenen (untergeordneten) Gültigkeitsbereich —, entweder einen isolierten Gültigkeitsbereich (scope: {}) oder einen neuen Gültigkeitsbereich (scope: true). Da die Direktive keine eigenständige Komponente ist, würde ich keinen Isolate-Bereich verwenden (siehe auch 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?).

Mit dem für die Direktive ausgewählten Bereichstyp können der Sortiertyp und die umgekehrten Werte über Funktionsargumente an die übergeordneten Elemente übergeben werden, oder sie können direkt im übergeordneten Bereich festgelegt werden. Ich schlage vor, Funktionsargumente:

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 In der Geige, nur der Einfachheit halber, ich habe nicht die Fullname Spalte enthalten.

Answer 2

Sie müssen Ihre scope "isolieren". Dies wird jeder Instanz der Richtlinie einen eigenen Geltungsbereich geben. Fügen Sie Folgendes zu Ihrer Richtlinie Definition:

scope: {}, 

Also, Ihre endgültige Richtlinie Definition würde wie folgt aussehen:

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

Die Egghead.io Videos gehen, um Umfang Isolation in der Tiefe. Sie können sie hier anzeigen: http://www.egghead.io/

Die isolierten Scope-Videos beginnen bei Tutorial # 16.