如何使用指令方法启用/禁用锚标记？
例：
>点击编辑链接，创建&删除需要禁用或灰显
>点击创建链接，编辑&删除需要禁用或灰显
JAVASCRIPT：
angular.module('ngApp',[]).controller('ngCtrl',['$scope',function($scope){
$scope.create = function(){
console.log("inside create");
};
$scope.edit = function(){
console.log("inside edit");
};
$scope.delete = function(){
console.log("inside delete");
};
}]).directive('a',function() {
return {
restrict: 'E',link: function(scope,elem,attrs) {
if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
elem.on('click',function(e){
e.preventDefault();
if(attrs.ngClick){
scope.$eval(attrs.ngClick);
}
});
}
}
};
});
更新：
禁用href在链接函数返回中工作得更好。下面的代码已更新。
禁用href在链接函数返回中工作得更好。下面的代码已更新。
aDisabled自然在ngClick之前执行，因为指令按字母顺序排序。当aDisabled重命名为tagDisabled时，指令不起作用。
> href链接不会被点击
> ng点击事件不触发
> styles通过添加一个disabled类来改变
这个指令通过模仿ngDisabled指令来做到这一点。基于a-disabled指令的值，所有上述功能都被切换。
myApp.directive('aDisabled',function() {
return {
compile: function(tElement,tAttrs,transclude) {
//Disable ngClick
tAttrs["ngClick"] = "!("+tAttrs["aDisabled"]+") && ("+tAttrs["ngClick"]+")";
//return a link function
return function (scope,iElement,iAttrs) {
//Toggle "disabled" to class when aDisabled becomes true
scope.$watch(iAttrs["aDisabled"],function(newValue) {
if (newValue !== undefined) {
iElement.toggleClass("disabled",newValue);
}
});
//Disable href on click
iElement.on("click",function(e) {
if (scope.$eval(iAttrs["aDisabled"])) {
e.preventDefault();
}
});
};
}
};
});
这里是一个css样式，可能表示一个已禁用的标记：
a.disabled {
color: #AAAAAA;
cursor: default;
pointer-events: none;
text-decoration: none;
}
