且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

启用禁用使用锚标记angularjs

更新时间: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:


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

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

  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,你的榜样