首先，给大家看看指令完成的效果。（请注意区分下面几张图片中，对象值的变化）
好了，效果图已经看完了，如果大家有兴趣的话可以继续往下看，接下来要讲的是关于angularJs中filter内置好的order功能，如果熟悉这个功能的同学们可以跳过下面要讲的内容
orderBy这个功能其实是内置的过滤器，他可以在html和js代码中使用
html：{{ orderBy_expression | orderBy : expression : reverse}}
js ：$filter('orderBy')(array, expression, reverse)
在这里我们只看html标签的运用，可以看出来他需要传入三个值
1.orderBy_expression ：你需要排序的数组
2.expression ：你需要根据哪个条件排序
3.reverse ：正序还是倒序（boolean）
看到这里可能有的同学就知道为什么我要创建效果图中的这样的{"orderPredicate":"price","orderReverse":false}对象了。
由于这里不是详细讲过滤的所以想深入理解的话 登录官方的API吧 ： http://docs.angularjs.cn/api/ng/filter/orderBy
现在开始进入主要内容了，首先我们要讲的是指令，不废话先上代码在分析
js：
angular.module('MyApp',[])
.controller('MyCtrl',function(){
var vm = this;
//排序条件的数组
vm.orderList = [{
"title" : "价格",
"value" : "price"
},{
"title" : "数量",
"value" : "count"
}]
//排序条件对象
vm.orderInfo = {
orderPredicate : "",//排序的值
orderReverse : false//正反序
}
})
.directive('orderList', function() {
return {
controller: function($scope, $element, $attrs, $transclude) {
var lists = [];//排序条件的列表
this.getOpened = function(selectedItem) {
//控制只能点击一个排序条件
angular.forEach(lists, function(item, key) {
if (selectedItem != item) {
item.showMe = false;
}
});
}
//提供方法，在item生成的时候，将值放入lists中
this.addItem = function(item) {
lists.push(item);
}
},
restrict: 'AE',
template: '<ul class="list-group" ng-transclude></ul>',
replace: true,
transclude: true,
link: function($scope, iElm, iAttrs, controller) {}
};
})
.directive('orderListItem', function() {
return {
scope: {
orderVaule: '=',//即将排序数组中的排序条件
orderReverse: '=',//排序条件的值
orderPredicate: '=',//控制排序的正序或倒序
iconUp: '@',//升序图标
iconDown: '@',//降序图标
},
controller: function($scope, $element, $attrs, $transclude) {},
require: '?^orderList',//'^'判断是否存在父容器oederList,'?'可以避免orderList不存在的时候不报错
restrict: 'AE',
template: '<li class="list-group-item" ng-click="toogle(orderVaule)">' +
'<span ng-transclude></span>' +
'<i ng-show="showMe" class="glyphicon pull-right" ng-class="{true:\'{{iconUp}}\',false:\'{{iconDown}}\'}[orderReverse]"></i>' +
'</li>',
transclude: true,
link: function($scope, iElm, iAttrs, controller) {
//item渲染刚开始所有的图标都不显示
$scope.showMe = false;
//讲渲染的item加入父容器的lists中
controller.addItem($scope);
//点击item事件
$scope.toogle = function(value) {
//正反序切换
$scope.orderReverse = !$scope.orderReverse;
//将值赋予排序条件
$scope.orderPredicate = value;
//并显示图标
$scope.showMe = true;
//关闭其他item的图标
controller.getOpened($scope);
}
}
};
})
html：
<body ng-controller="MyCtrl as vm">
<order-list>
<order-list-item ng-repeat="item in vm.orderList" icon-up="glyphicon-arrow-up" icon-down="glyphicon-arrow-down" order-vaule="item.value" order-reverse="vm.orderInfo.orderReverse" order-predicate="vm.orderInfo.orderPredicate">
{{item.title}}
</order-list-item>
</order-list>
{{vm.orderInfo}}
</body>
可能有些同学疑惑 ng-controller="MyCtrl as vm" 这是什么意思，其实这是angularJs推荐的写法，为了避免与$scope的原型继承搞混。毕竟全部都是$scope也不太美观，实际上是这样的 var vm =$scope.vm = {}
大部分的讲解都在注释上了，如果有问题的可以在下方提问；另外这里的图标是不支持图片的，只支持图标，需要引入bootstrap.css和里面的图标功能。