我正在尝试在 angularjs 中创建一个支持排序的简单网格。我无法弄清楚如何为每个列正确创建排序指示器，然后将其绑定到sortoptions在控制器上，这样当它们改变时，排序指示器也会改变。
我的 WIP 在这里：http://plnkr.co/edit/ZzPYY4ZTD8MvRIMWKEwP?p=preview http://plnkr.co/edit/ZzPYY4ZTD8MvRIMWKEwP?p=preview
我正在创建表并将其包装在指令中，以便我可以在控制器上设置绑定onSort和sortoptions:
<table>
<tr>
<thead columnwrap sortoptions="sortoptions" onsort="onSort">
<th><column sortby='id'>Id</column></th>
<th><column sortby='name'>Name</column></th>
</thead>
</tr>
我的包装指令非常简单，没有做太多事情：
app.directive('columnwrap', function() {
return {
restrict: 'A',
scope: {
sortoptions : '=',
onsort: '='
}
};
});
我的专栏指令是所有魔法应该发生的地方。在那里，我很努力地想要到达sortoptions，但由于这是在父指令中声明的，所以我不确定如何做到这一点，并且因此在指令中一切都崩溃了。
app.directive('column', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
sortby: '@'
},
template: "<span><a ng-click='sort' href='#' ng-transclude></a>" +
"<span ng-show='sortby == sortoptions.sortby'>" + // sortoptions does not exist, won't work
"<span ng-switch='sortoptions.sortdir'>" + // again, no sortoptions
"<span ng-switch-when='asc'> ▲</span>" +
"<span ng-switch-when='desc'> ▼</span>" +
"</span>" +
"</span></span>",
link: function(scope, el, attrs) {
scope.sort = function() {
// Want to check the sortoptions of the controller
var sortDir = "desc";
if (sortoptions.sortBy == attrs.sortby) {
sortDir = sortoptions.sortBy == "asc" ? "desc" : "asc";
}
scope.$parent.onsort(scope.sortby, sortDir)
}
}
};
});
如何从列指令访问排序选项，并使其在单击排序列时，所有列指示器都会相应更新？
Thanks!
