Question

场景：我正在使用Angular js指令。我正在制作元素（即所有锚标签和按钮，除此之外，包含ng-click作为属性的div）禁用。为此，我使用两个指令。一个用于获取满足上述条件的所有元素和用于覆盖该元素的click事件的第二个指令。

问题：到目前为止，我在获取元素和动态应用指令方面取得了成功。之后，我想禁用click事件。我的问题是，如何使ng-click null然后一旦我的条件满足，我必须执行相同的ng-click。注意：我使用$ compile来编译内容的html。 disableElement指令获取所有元素并将ng-click属性设置为null。但不知何故，它不起作用。

目标：禁用所有元素的ng-click。

// Disable Element Directive
app.directive('disableElement', ['$timeout','$compile',($timeout,$compile)=> {
return {
    restrict: 'AE',
    priority: 1,
    link: (scope, element, attr)=> {





        $timeout(()=> {
            if (condition satisfies get all elements and apply directive dynamically) {

                var allDivs = angular.element(element).find("*");
                var clickAction;
                for (var i = 0; i < allDivs.length; i++) {
                    var currentElement = allDivs[i];


                    if (currentElement.attributes.length > 0) {
                        for (var j = 0; j < currentElement.attributes.length; j++) {
                            if (currentElement.nodeName == "a" || currentElement.attributes[j].name == "ng-click") {

                                //Gettting click action
                                clickAction = currentElement.getAttribute("ng-click");

                                //making ng-click null  
                                currentElement.setAttribute("ng-click",null);

                                //applying directive dynamically
                                currentElement.setAttribute("ng-demo","");
                                $compile(currentElement)(scope);
                            }
                        }
                    }
                }





            }
    }, 1000);


    }
};
}]);

//ng-demo directive which overrides ng-click
app.directive('ngDemo',function() {
return {
    restrict: 'A',

    link: (scope, element, attr) => {

        var clickAction = attr.ngClick;
        element.bind('click', (e)=> {

            e.preventDefault();

        });


    }
};
});

Answer 1

我遇到了类似的问题，这是我在jsfiddle中的解决方案。基本上，它会在编译阶段捕获ngClick事件操作，将该操作存储在其他地方，使ngClick无效，然后在链接阶段设置一个包含存储操作的click事件。

在true和false之间更改custom指令的值将显示结果

http://jsfiddle.net/raleighvon/10wc2co6/5/

HMTL

<div ng-click="originalAction()" rv-deny-access="false" ng-controller="MyCtrl">
  click me
</div>

JS

//Captures ngClick and lets it pass through if directive value is false
var myApp = angular.module('myApp',[]);

myApp.directive('rvDenyAccess', function($parse) {
return {
  restrict: 'A',
  compile: function(elem, attrs) {
      var capturedOriginalAction = attrs.ngClick;
      attrs.ngClick = null;
      elem.removeAttr('ng-click');
      return function(scope, elem, attrs) {
        var value = scope.$eval(attrs.rvDenyAccess);
          if(value) { 
              // Can make a new action happen or prevent original action
              elem.bind('click', function(e) {
                  alert('Access denied!');
              });
          } else {
              elem.bind('click', function(e) {
                  $parse(capturedOriginalAction)(scope)
              });                
          }
      };
  }
};

});

function MyCtrl($scope) {
    $scope.originalAction = function() {
    alert('Access granted!');
   };
}

Angular JS：禁用ng-click

1 个答案: