启用禁用使用锚标记angularjs [英] Enable Disable Anchor tag using angularjs

问题描述

如何启用和使用指令的方式禁止锚标记？

How to enable and disable anchor tags using directive approach?

例如：1），而修改链接点击，创造和放大器;删除需要被禁用或变灰
2），而上创建链接，编辑和放一下;删除需要被禁用或变灰

Example: 1) while clicking on edit link, create & delete needs to be disabled or grayed out 2) while clicking on create link, edit & delete needs to be disabled or grayed out

链接到code

推荐答案

更新：
禁用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:

1. 的href 链接没有点击
时所要遵循
当点击
2. ngClick 事件不火


3. 的风格中加入禁用类改为

1. href links not to be followed when clicked
2. ngClick events not to fire when clicked
3. styles changed by adding a disabled 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;
}

这里是运行中的code，你的榜样

这篇关于启用禁用使用锚标记angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！