up vote 1 down vote favorite

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 });
        });
    }
}})`

which 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 parameter to parent method. If I make this implementation without parameter is is working and I see alert() if I mouse over on button.

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

share|improve this question
    
I will explain you seperate ! – Avi Kenjale Mar 3 '16 at 1:50
up vote 1 down vote accepted

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

share|improve this answer
    
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). – Avi Kenjale Mar 2 '16 at 20:11
    
@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 – Pankaj Parkar Mar 2 '16 at 20:17
    
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'}'. – Avi Kenjale Mar 2 '16 at 20:24
    
@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 Mar 2 '16 at 20:27
1  
@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) – Pankaj Parkar Mar 2 '16 at 20:46

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.