angularjs create custom event directive

Question

I have a simple attribute-restricted directive like

app.directive('akMouseOver', function () {
return {
    restrict: 'A',
    scope: {
        mouseOver: '&akMouseOver'
    },
    controller: function ($scope) {

    },
    link: function (scope, elem, attrs) {
        elem.bind('mouseover', function () {
            scope.mouseOver({ hValue: value });
        });
    }
}})

that I am calling on a simple HTML button as

<button ak-mouse-over='btnMouseOver('Win Win')' class='btn btn-primary'> Hello There !</button>

and my parent controller method is

$scope.btnMouseOver = function (hValue) {
    alert(hValue + 'Hello !!!');
}

Here, somehow, I am unable to pass a parameter to the parent method. If I make this implementation without parameter, it is working and I see alert(), if I hover the mouse over the button.

Looking for passing (a) parameter/s without adding additional attribute/directive/scope variable.

I will explain you seperate !

Avi Kenjale
– Avi Kenjale

2016-03-03 01:50:16 +00:00
Commented Mar 3, 2016 at 1:50 — Avi Kenjale
– Avi Kenjale, Commented Mar 3, 2016 at 1:50

Pankaj Parkar · Accepted Answer · 2016-03-02 20:13:23Z

1

In your case it should work & then it would alert with Win Win Hello !!! because you had hardcoded value of function level, even if you pass value from directive it will just pass the same.

While passing value from directive to registered function of isolated scope, you should have btnMouseOver(hValue), because when you are calling mouseOver function of directive which will basically going to call btnMouseOver method registered on ak-mouse-over attribute.

At the time of passing value you need to have pass value to parent controller function in JSON kind of format like {hValue: value} where hValue will represent parameter of btnMouseOver function, placed over a ak-mouse-over and then value is value which you are passing to function.

<button ak-mouse-over="btnMouseOver(hValue)">
    Hello There !
</button>

Also you need to call scope.$apply() from mouserover event handler to keep of digest cycle as you are running an event outside angular context.

Demo here

edited Mar 2, 2016 at 20:13

answered Mar 2, 2016 at 19:32

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

12 Comments

Avi Kenjale Over a year ago

So, basically if we are passing direct string value to attribute directive function, {jValue: 'myValue'} parent function should have called by passing string value - 'myValue'. else script will keep looking for value (per my question).

Pankaj Parkar Over a year ago

@Avinash no.. I edited my answer.. basically if you wrote ak-mouse-over="btnMouseOver(a)" then directive call would have been scope.mouseOver({ a: value });.. understood? our hValue current value is hValue because is there present on attribute function paraemter

Avi Kenjale Over a year ago

in my question I asked ak-mouse-over="btnMouseOver('Win Win')" so 'win win' is string value, however per your updated comment hValue is parameter /variable name(not quoted). So angular will consider it (hValue) as scope variable of parent controller. Which I tested before asking this question. so if parent controller function called with string value, directive's scope function/event should called isolated method with json {jValue: 'value'}'.

Pankaj Parkar Over a year ago

@Avinash don't get confused...if you are directly passing string parameter in function Win Win, it wouldn't look what have passed from directive.. it will only just pass what ever there as hard code value.

Pankaj Parkar Over a year ago

@Avinash when you had firstName like btnMouseOver(firstName), it was working because it was trying to evaluate firstName value from scope variable, which it does.. but when you had win win value in function like btnMouseOver(win win) angular does tries to evaluate that expression inside angular scope & its gonna be fail because win win is not variable & then you will see error inside a console which would be $pareser error(as former rule, variable name don't have ` `space in it)

|

Collectives™ on Stack Overflow

angularjs create custom event directive

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related