Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
2

Greetings Overflowers,

Using angularjs bind function to register event handlers on elements does not work when including eventjs script!

I was under the impression that eventjs will replace default addEventListener function to its own which will be used by angularjs bind function seamlessly.

I tried incuding eventjs before and after angularjs but no luck.

Any ideas?

Kind regards

share|improve this question
Can you point us to the docs for "angularjs bind function". Thanks. – Stewie Jun 29 at 17:09
search for bind in docs.angularjs.org/api/angular.element – geeko Jul 6 at 19:04
why negative vote without comment!!! – geeko Jul 6 at 19:06
have you tried something? what have you done so far? – Ron Jul 8 at 6:39
I tried to include the eventjs javascript into my page which should replace the elements default add/removeEventListener functions (as per thier docs and code, and you can take a look) that are used by angularjs and hence angularjs bind function would seemlessly use eventjs without any further changes, however this is not the case as events stop firing and I do not know why? I am testing on latest Chrome. – geeko Jul 8 at 7:11
show 4 more comments

This question has an open bounty worth +50 reputation from geeko ending in 8 hours.

The question is widely applicable to a large audience. A detailed canonical answer is required to address all the concerns.

2 Answers

up vote 1 down vote

It seems that the event message becomes something angular does not expect. (I do not know the detail, I'll wait for a better answer from the community...)

Just a simple workaround, it would work if you use jQuery (source it before angularJs)

share|improve this answer
I do not need jQuery so I am not going to use it. – geeko Jul 8 at 18:10
up vote 1 down vote

I was able to get the events to bind but I soon discovered that some events don't work using angular.element.bind(). For example, in the case of the click event, I had to use the Event.add() syntax.

Here is what it looks like:

angular.module('myApp', []).config(function(){
  Event.modifyEventListener = true; 
  Event.modifySelectors = true; 
}).controller('SomeCtrl', function($scope){
  $scope.eventType = "";
}).directive('foo', function($log){
  return {
    link: function(scope, elm, attr){
      // here it is using the 'bind' syntax
      elm.bind('mousedown mouseup mouseenter mouseleave', function(evt){
        $log.debug(evt);
        scope.eventType = evt.type;
        scope.$apply();
      });
      // here it is using Event.add
      Event.add(elm[0], 'click', function(evt, context) {
        $log.debug(context);
        scope.gesture = context.gesture + ', ' + context.pointerType;
        scope.$apply();
      });
    }
  };
});

You can see a demo here: http://plnkr.co/edit/FLMckw?p=preview

share|improve this answer
It buys me advanced handling of touch events. Plus, you are looking into a different library. The question is about eventjs by mudcube. Please, follow the link in the question. – geeko Jul 9 at 12:24
well that makes a lot more sense... I will attempt to update my answer. – moderndegree Jul 9 at 14:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.