Angular js指令将更改应用于所有实例

Question

我正在尝试创建一个排序指令，如果我不排序任何其他列它看起来不错，但当我选择另一列时，前一个图标没有重置为默认值。

默认屏幕截图 enter image description here

排序不同的列后 enter image description here

指令实例

<sort-th data-options="self.query" 
sort-prop="name"
col-name="Name"
sort-callback="self.sort('name')" />

内部指令

var template = function(){        
   return '<div> <span>{{colName}} </span><span class="fa fa-sort{{sortIcon}}">      </span> </div>';
};

function sortIcon(options, prop){
if(options.sort !== prop){
return '';
} else if(options.sort === prop && options.order === 1){
return "-desc";
} else if(options.sort === prop && options.order === -1){
return "-asc";
}        
}
return {
scope: {
sortOptions: '=options',
sortProp: '@',
colName: '@',
callback: '&sortCallback'
},
replace: 'true',
restrict: 'AE',    
template: template,
link: function(scope, elem, attrs){
scope.sortIcon = sortIcon(scope.sortOptions, scope.sortProp);

elem.on("click", function() {                
scope.sortOptions.sort = scope.sortProp;
scope.sortOptions.order = (scope.sortOptions.order === 1)? -1 : 1;
scope.sortIcon = sortIcon(scope.sortOptions, scope.sortProp);
scope.callback();
});
}
};
}]);

Answer 1

问题解决了，我用

替换了我的模板功能

返回＆＃39; {{colName}}＆＃39;;