bind regular custom js event to angular controller function

Question

I'm trying to bind angular function to regular js event (logedIn event) using angular directive as described here.

The directive code is:

evApp.directive('onlogin', function () {
return {
    restrict: 'A',
    transclude: true,
    scope: {
        'onlogin': '&'
    },
    link:function (scope, element, attr) {
        //Code to detect when element is pulled goes here
        document.addEventListener("logedIn", function (e) {
            scope.$eval(attr.onlogin);
        });
    }
}
});

The html tag is:

<div  onlogin="loggedIn()"></div>

Its worked but I didn't found a way to pass the parameter 'e' that arrived with the event in the link function. I tried to pass from the html the function handler only and call the function with the parameters from the link function but it didn't worked. some thing like:

<div  onlogin="loggedIn"></div>

Thanks, Amichai

you should add scope.$apply to let angular now that it needs to fire digest cycle and then just call scope.onlogin({e: e}); — sielakos
– sielakos, Commented May 26, 2016 at 8:04

sielakos · Accepted Answer · 2016-05-26 08:37:50Z

4

you should add scope.$apply to let angular now that it needs to fire digest cycle and then just call scope.onlogin({e: e}) basically you can use it in handler, as you would use $event.

 evApp.directive('onlogin', function () {
return {
    restrict: 'A',
    transclude: true,
    scope: {
        'onlogin': '&'
    },
    link:function (scope, element, attr) {
        //Code to detect when element is pulled goes here
        document.addEventListener("logedIn", function (e) {
            scope.$apply(function () {
             scope.onlogin({e: e})
            });
        });
    }
}
});

edited May 26, 2016 at 8:37

answered May 26, 2016 at 8:07

sielakos

2,40413 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

amichai Over a year ago

Its give me an error that attr.onlogin is not a function

amichai Over a year ago

I changed the attr.onlogin({e:e}); to scope.onlogin({e:e}); and now its working. Thank you.

sielakos Over a year ago

Yes, you are right. I made mistake when I was copy pasting your code, it should be scope.

amichai · Accepted Answer · 2016-06-02 13:35:58Z

1

The call to the onlogin function need to be inside anonymous function in order to add parameters, but the function need to be stored outside the anonymous function, otherwise it will not fire.

evApp.directive('onlogin', function () {
    return {
       restrict: 'A',
       transclude: true,
       scope: {
         'onlogin': '&'
       },
       link:function (scope, element, attr) {
          //Code to detect when element is pulled goes here
          document.addEventListener("logedIn", function (e) {
             var fn = scope.onlogin();
             scope.$apply(function () {
                  fn(e);
             });
          });
       }
    }
});

edited Jun 2, 2016 at 13:35

answered May 26, 2016 at 8:25

amichai

72810 silver badges20 bronze badges

1 Comment

sielakos Over a year ago

Yes, you were right to do so, i missed it, cos did copy paste fragment of your code and there you used attr, obviously it should be scope. My mistake by on reading code carefully enough.

Collectives™ on Stack Overflow

bind regular custom js event to angular controller function

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related