I'm currently working on creating a directive that can sort any type of data at any point within my application. Let's take a look at the code snippet below (which is based on actual code, but simplified for clarity):
angular.module('test', []);
angular.module('test').controller('wrapperController',['$scope', function(scope){
scope.data = {}
scope.data.rows = [{name: 'foo'}, {name: 'bar'}, {name: 'bazz'}]
scope.data.columns = [{name: 'Name', sortBy: 'name'}]
}]);
angular.module('test').directive('grid', [function(){
return {
restrict: 'A',
templateUrl: 'grid.html',
scope: {
grid: '='
}
}
}]);
angular.module('test').directive('sortable', [function(){
return {
restrict: 'A',
scope: {
sortableCollection: '=',
sortableKey: '&'
},
compile: function(el, at, transclude){
if(at['ng-click']){
el.attr('ng-click', el.attr('ng-click')+';sortFunction()')
}else{
el.attr('ng-click', 'sortFunction();')
}
return(function(scope, element, attrs){
scope.sortableKey = scope.sortableKey();
scope.sortFunction = function(){
alert(" I AM IN UR FUCNTION SORTING UR D00dZ!!1");
}
});
}
}
}]);
Here's the HTML:
<body ng-app='test'>
<div ng-controller='wrapperController'>
<div grid='data'></grid>
</div>
</body>
and (in grid.html):
<div>
<table>
<thead>
<tr>
<td ng-repeat='column in grid.columns'>
<div sortable sortable-collection='grid' sortable-key='column.sortBy'>{{column.name}}</div>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat='row in grid.rows'>
<td ng-repeat='cell in grid.columns'>
{{row.name}}
</td>
</tr>
</tbody>
</table>
</div>
Upon inspecting the HTML, it appears that the ng-click attribute is being set correctly. However, despite this, the function does not execute when the header is clicked. What could be causing this issue? Is there a way to achieve the desired behavior?