How to prevent split area between n Angular directives?

Question

All my directives use the same scope, and I want my directives to work on their own.

Directive

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> 

As a result, all columns are set to Age and sorted by age. Of course, I want each column to sort its own column. How can I achieve this?

UPDATE: Forgot to mention that orderField and reverse are used in ng-repeat | orderBy ng-repeat | orderBy :

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

Answer 1

Each instance of your directive should have its own header, sort type, and reverse property. Thus, the directive will need its own (child) scope - either the selection area ( scope: {} ) or a new area ( scope: true ). Since the directive is not a standalone / standalone component, I would not use a selection area (see Also When writing a directive in AngularJS, how can I decide if I need a new area, a new child scope, or a new isolated volume?. )

With the type of region selected for the directive, the sort type and return values ​​can be passed to the parent through function arguments or they can be set directly in the parent region. I suggest function arguments:

 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 the fiddle, just for simplicity, I did not include the FullName column.

Answer 2

You need to "isolate" the scope. This will give each instance of the directive its own scope. Add the following to your directive definition:

 scope: {}, 

So your final directive definition will look like this:

 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 videos go to the depth of the selection. You can watch them here: http://www.egghead.io/

Highlighted videos start with tutorial # 16.