更新时间:2023-12-05 20:35:10
更新:
禁用HREF工作在链接功能更好的回报。 code以下已被更新。
Update: Disabling the href works better in the link function return. Code below has been updated.
aDisabled
自然,因为指令按字母顺序排序前 ngClick
执行。当被重命名为 tagDisabled
aDisabled
,该指令做的不可以的工作。
aDisabled
naturally executes before ngClick
because directives are sorted in alphabetical order. When aDisabled
is renamed to tagDisabled
, the directive does not work.
要禁用的一的标签,我会想以下几点:
To "disable" the "a" tag, I'd want the following things:
的href
链接没有点击 ngClick
事件不火禁用
类改为href
links not to be followed when clickedngClick
events not to fire when clickeddisabled
class这指令通过模仿ngDisabled指令执行此操作。根据 A-停用
指令的值,上述所有的功能切换。
This directive does this by mimicking the ngDisabled directive. Based on the value of a-disabled
directive, all of the above features are toggled.
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样式,可能有禁用标记:
Here is a css style that might indicate a disabled tag:
a.disabled {
color: #AAAAAA;
cursor: default;
pointer-events: none;
text-decoration: none;
}