关于点击事件监听器和 $postLink 点击事件监听器不能一起工作的指令

Question

我正在使用 angular1 的组件设计来构建此应用程序。我已经制定了一个指令，当用户点击它时，它会在按钮上产生涟漪效应。这是一种常见的行为，因此我已将其纳入指令。现在我想从组件控制器 $postLink() 钩子向同一个按钮添加另一个事件监听器，这会导致指令事件监听器执行失败。

如何解决这个问题。我希望两个事件都被收听。

下面是我的涟漪效应指令。我正在使用 commonjs 加载模块，所以不要被它打扰。

var app=require('../../../../Development/Assets/Js/appConfig');
app.directive('wave',waveConig);
waveConig.$inject=['$compile','$timeout'];
function waveConig($compile,$timeout){
return{
  restrict:'A',
  link:waveLink
};
function waveLink(scope,elem,attr){
  var waveColor = attr.color;
    elem.unbind('mousedown').bind('mousedown', function (ev) {
        var el = elem[0].getBoundingClientRect();
        var top = el.top;
        var left = el.left;
        var mX = ev.clientX - left;
        var mY = ev.clientY - top;
        var height = elem[0].clientHeight;
        var rippler = angular.element('<div/>').addClass('wave');
        rippler.css({
            top: mY + 'px',
            left: mX + 'px',
            height: (height / 2) + 'px',
            width: (height / 2) + 'px',
        });
        if (waveColor !== undefined || waveColor !== "") {
            rippler.css('background-color', waveColor);
        }
        angular.element(elem).append(rippler);
        $compile(elem.contents())(scope);

        $timeout(function () {
            angular.element(rippler).remove();
        }, 500);

    });
}
}

下面是我的组件控制器代码。

verifyCtr.$inject=['$element','verifyService','$scope'];
function verifyCtr($element,verifyService,$scope){
   console.log('verify component is up and working');
var $this=this;

var serviceObj={
    baseUrlType:'recommender',
    url:'https://httpbin.org/ip',
    method:1,
    data:{}
};

$this.$onInit=function(){
    verifyService.getData(serviceObj,{
        success:function(status,message,data){
            $this.data=data;
        },
        error:function(status,message){
            alert(status,'\n',message);
        }
    });
};
$this.$onChanges=function(changes){};
$this.$postLink=function(){
    angular.element(document.querySelector('.addNewTag')).bind('click',function(){
 console.log('hi there you clicked this btn');
});
};
$this.$onDestroy=function(){
    angular.element(document.querySelector('.addNewTag')).unbind('click');
    var removeListener=$scope.$on('someEvent',function(ev){});
    removeListener();
};
}module.exports=verifyCtr;

当我运行它。组件点击事件侦听器被触发。但指令无法执行。我不知道是什么导致了这个问题，我希望它们都能正常工作。

Answer 1

花了一段时间才弄明白。

document.querySelector('.class-name') ;

returns html 个元素的数组。和

angular.element(elem).bind()

适用于一个 angular 元素。所以我不得不使用一种独特的方式来识别元素，即通过 Id。所以我所做的是

angular.element(document.querySelector('#id')).bind();

还有其他方法可以通过类名实现。我们可以迭代数组并获取我们的元素并将事件绑定到它。

关于点击事件监听器和 $postLink 点击事件监听器不能一起工作的指令

Directive on click event listener and $postLink click event listener not working together

javascript

angularjs

jqlite

angular-directive

angular-components