How to call Angularjs directive after the return of another function?

Question

I have on my website a code similar to the following:

<div ng-click=someFunction() my-directive>...</div>
<div ng-show=showMe>...</div>

The function someFunction() looks as follows:

function onSuccess() {
    // do something
    console.log("in response")
}
function someFunction() {
    $http( 
        {
         ...
         }).then(onSuccess);

}

The directive my-directive is created as follows:

app.directive(myDirective, function() {
    return {
        restrict: 'A',
        link: function(scope, $elm) {
                $elm.on('click', function() {
                    console.log("in directive");
                    //do something
                });
        }
    }
});

The problem is that I need the directive to fire only after onSuccess had finished what it loaded and not before (i.e., I want to see in the console "in response" before "in directive" and right now I see "in directive" first)

It looks like something doable but I can't find how... Any help/ideas will be appreciated!

EDIT: I just saw this answer: Wait for data in controller before link function is run in AngularJS directive It is not what I'm looking for as the function someFunction is independent of the directive and I want it to stay as independent as possible (the function is placed in the controller of the app and I don't want to manipulate the view directly from there).

EDIT 2: I am aware of the possibility to use timeout but I'd rather use a more general solution. With timeout I'll have to guess how long to wait and I don't want to rely on that.

EDIT 3: I edited the function someFunction to a more specific one. I can't change the structure of someFunction and I don't want to do the directive's work in onSuccess.

thanks again!

This SO answer might be what you're looking for. Please, ignore this comment. — Ana Liza Pandac
– Ana Liza Pandac, Commented Jun 27, 2016 at 7:31
@alex_andrea I would have suggested the same, but I don't think it will work with attribute directives and a click listener on the same object. You can only add or remove an element with ng-if and not an attribute of an element. — ssc-hrep3
– ssc-hrep3, Commented Jun 27, 2016 at 7:32
@ssc-hrep3 i've never thought of that. Thanks for pointing out.:) — Ana Liza Pandac
– Ana Liza Pandac, Commented Jun 27, 2016 at 7:35
thanks for your comments but as @ssc-hrep3 pointed the mentioned answer won't help here. thanks :-) — hashark
– hashark, Commented Jun 27, 2016 at 7:49
In your scenario you have response which linked to the DOM element click event so we can not use ng-if. so go for $timeout function. — Dinesh Ram
– Dinesh Ram, Commented Jun 27, 2016 at 7:52

C14L · Accepted Answer · 2016-06-27 07:49:39Z

0

If you add several event listeners to the same element, they are executed in the order of the addEventListener() calls. For example

e.addEventListener('click', function(){ console.log('Click 1'); });
e.addEventListener('click', function(){ console.log('Click 2'); });

would first show "Click 1" then "Click 2". That doesn't seem to be the case for Angular, because you say that the directive fires first.

If you can modify the directive, I would simply wait for 100 ms or so.

link: function(scope, $elm) {
    $elm.on('click', function() {
        $timeout(function(){
            console.log("in directive");
                //do something
            });
        }, 100);
    }

to give the controller time to do its things.

answered Jun 27, 2016 at 7:49

C14L

12.6k4 gold badges43 silver badges53 bronze badges

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

1 Comment

hashark Over a year ago

hi, timeout will probably do the job but I am looking for a more general solution (and as you wrote, the eventlisteners aren't relevant here). thanks anyway!

Silvinus · Accepted Answer · 2016-06-27 08:03:25Z

0

I recommend to you, to use another approch. Don't use ng-click but pass your function into your directive

app.directive(myDirective, function() {
   return {
       restrict: 'A',
       link: function(scope, $elm, iattrs) {
            $elm.on('click', function() {
                scope.$eval(iattrs.myDirective)
                .then(function(response) {
                   console.log("in directive");
                   //do something
                });
            });
       }
   }
});

Please see this plunker: https://plnkr.co/edit/PaV6cCn0NmpBIVaJGAEL?p=preview

It supposed the function return a promise

answered Jun 27, 2016 at 8:03

Silvinus

1,4459 silver badges16 bronze badges

5 Comments

hashark Over a year ago

hi, thanks. The problem is that the function someFunction calls a http and I want the directive to be called after its callback finished running.

Silvinus Over a year ago

I don't understand. $http return a promise you can return it instead of my promise example. And you can execute directive code after $http send response. When you said 'directive to be called after its callback finished', you want angular call link function after ?

hashark Over a year ago

I simply can't do that. My code works differently and I can't return the promise.

Silvinus Over a year ago

OK so write your complet someFunction()

hashark Over a year ago

edited the question. The complete implementation is irrelevant as I don't want to change its structure as other elements are dependent on it

Collectives™ on Stack Overflow

How to call Angularjs directive after the return of another function?

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related