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;

当我运行它。触发组件click事件监听器。但该指令未能执行。我不知道什么导致了这个问题，我希望他们都能工作。

Answer 1

需要一段时间来搞清楚。

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

返回一个html元素数组。和

angular.element(elem).bind()

适用于单个角度元素。所以我不得不使用一种独特的方法来识别Id的元素i，e。所以我做的是

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

还有其他方法可以通过classname来实现。我们可以在数组上创建并获取我们的元素并将事件绑定到它。

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

1 个答案: