I'm working in an angular application and i want to implement a table sort system Here is my ui-table-sort.js
(function() {
'use strict';
var dependencies = [];
angular.module('uiTable', dependencies)
.config(configFn)
.run(runFn)
.directive('uiTableSorted',[uiTableSortedDirective])
function uiTableSortedDirective() {
return {
restrict: 'A',
transclude: true,
template :
'<a ng-click="onClick()">'+
'<span ng-transclude></span>'+
'<i class="glyphicon" ng-class="{\'glyphicon-sort-by-alphabet\' : order === by && !reverse, \'glyphicon-sort-by-alphabet-alt\' : order===by && reverse}"></i>'+
'</a>',
scope: {
order: '=',
by: '=',
reverse : '='
},
link: function(scope, el, attr, ctrl) {
scope.onClick = function () {
if( scope.order === scope.by ) {
scope.reverse = !scope.reverse
} else {
scope.by = scope.order ;
scope.reverse = false;
}
}
}
}
}
})();
This file is used an other controller 'entity-list.js :
(function() {
'use strict';
var dependencies = ['uiTable','core'];
angular.module('entityList', dependencies)
.config(configFn)
.run(runFn)
.directive('entityList', ['BASE_PATH', entityListDirective])
.controller('EntityListCtrl', ['$scope','Entity', EntityListCtrl])
function EntityListCtrl($scope , Entity ) {
$scope.order = 'id';
$scope.reverse = false;
$scope.eltsPerPage = 50
$scope.entityList = [];
$scope.offset = 0;
$scope.totalCount = 0;
var self = $scope;
$scope.edit = editFn;
$scope.delete = deleteFn
$scope.view = viewFn
and here is the view
<div ng-controller="EntityListCtrl">
<table class="table o-responsive-table table-hover">
<caption></caption>
<thead class="cf">
<tr>
<th scope="col" class="header" uiTableSorted order="id" by="order" reverse="reverse" >#</th>
</tr>
The problem is that my directive uiTableSorted is not added to the element in the view , is there any dependencies issue Ps i am follow this link plunker