Finally it was like I said, you need to pass key
, not '{{key}}'
, you can see it working here:
What's wrong with this angular directive?
Pergunta
I created a directive for table sorting as
app.directive('msTableHeader', function ($compile) {
return {
restrict: 'EA',
scope: {
key: '@',
title: '@',
sortBy: '=',
reverse: '='
},
link: function (scope, element) {
var html = "<th class='{{key}}' nowrap>{{title}} <a ng-click=\"sort('{{key}}')\"><i class='icon-sort'></i></a></th>";
var elm = $compile(html)(scope);
element.replaceWith(elm);
},
controller: function ($scope) {
$scope.sort = function (sortBy) {
if ($scope.sortBy == sortBy)
$scope.reverse = !$scope.reverse;
else
$scope.sortBy = sortBy;
// icon setup
$('th i').each(function () {
// icon reset
$(this).removeClass().addClass('icon-sort');
});
var icon = $scope.reverse ? 'icon-chevron-up' : 'icon-chevron-down';
$('th.' + sortBy + ' i').removeClass().addClass(icon);
};
}
}
});
This is how I use it:
<th ms-table-header key="name" title="Name" sort-by="sortBy" reverse="reverse"/>
It was working fine earlier. However, today I suddenly find it's not working anymore. The problem is, as I found through debugger, that {{key}} inside of the sort function for ng-click is not evaluated, so that {{key}} literal got passed to sort function. I believe this happened after I upgraded angularjs from 1.1.5 to 1.2.
EDIT: I created a Plunker at here. Initially, I use icons from font-awesome css, but those icons don't show up. I changed them to gryphicons from bootstrap.css. I included two angular.js versions, with one commented out. If you enable version 1.1.5, the table sorting works, but if you enable 1.2.14, it doesn't work.
Solução
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow