I am attempting to write a directive that will sort arbitrary data at an
arbitrary place in my application. Let us say I have the following code
(based on actual real code, sort function and some of the complexity for
simplicity)
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");
}
});
}
}
}]);
And the following 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>
Inspecting the HTML shows that the `ng-click` is correctly populating,
however when the heading is clicked the function never fires. Why is that?
Is there a way to get this kind of behaviour?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
