使用AngularJS启用/禁用锚点标记

发布时间：2020-12-17 08:56:57 所属栏目：安全来源：网络整理

导读：如何使用指令方法启用/禁用锚标记？例：点击编辑链接，创建删除需要禁用或灰显点击创建链接，编辑删除需要禁用或灰显 JAVASCRIPT： angular.module('ngApp',[]).controller('ngCtrl',['$scope',function($scope){ $scope.create = function(){ console.lo

如何使用指令方法启用/禁用锚标记？

例：

>点击编辑链接，创建&删除需要禁用或灰显
>点击创建链接，编辑&删除需要禁用或灰显

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);
                        }
                    });
                }
            }
       };
    });

LINK to CODE

更新：
禁用href在链接函数返回中工作得更好。下面的代码已更新。

aDisabled自然在ngClick之前执行，因为指令按字母顺序排序。当aDisabled重命名为tagDisabled时，指令不起作用。

要“禁用”“a”标签，我想要以下内容：

> 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;
}

And here is the code in action,with your example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!