Why is $timeout is needed for watch to trigger

Question

I have a directive that watches the height of an element. That element is updated by a controller that uses a factory method to get data. Unless I have a $timeout in that factory my watch never gets updated. Curious! Can anyone shed light onto why?

My controller:

$scope.update = function () {
    apiService.getLinks(function (response) {
        $scope.links = response;
        // If I try $scope.$apply() here it says its already in progress, as you'd expect
    });
}

quickLinksServices.factory('quickLinksAPIService', function ($http, $timeout) {

    quickLinksAPI.getQuickLinks = function (success) {

        //without this the watch in the directive doesnt get triggered
        $timeout(function () { }, 100); 

        $http({
            method: 'JSON',
            url: '/devices/getquicklinkcounts'
        }).success(function (response) {
            quickLinksAPI.quicklinks = response;
            quickLinksAPI.saveQuickLinks();

            success(response);
        });
    }

The directive I'm using is here

Well why you need fiddle for this? Chris use $apply() instead of $timeout. Your question helped me thanks. — Sudarshan Kalebere, Dec 16 '14 at 13:20
@Sudarshan, to solve this problem, there are many ways, but to try them, it seems to me, is missing some parts of the code — Grundy, Dec 16 '14 at 13:35
Oh ok but I taught he wants explanation, about why $timeout is needed to execute $watch. — Sudarshan Kalebere, Dec 16 '14 at 13:36
I wanted to understand why but also know the correct way of making this work, it currently feels like a hack :) — Chris, Dec 16 '14 at 13:51
@Chris, so can you provide jsfiddle with your directive and part of your code for reproduce your problem? :-) — Grundy, Dec 16 '14 at 14:00

score 3 · Answer 1 · edited May 23 '17 at 10:28

Basically angularjs provides $timeout service to trigger function call after specified time, but as I know the use of $timeout is not strictly needed, basically people have habit of writing this I mean they need to trigger watch after specified interval. but in many cases $apply does the trick. The thing you need is $apply(). for your reference please check this

Also many times what happens is angulars $watch executes very faster than you expected so it may send incomplete updates or response In such cases $timeout plays the important role by delaying $watch. You can clear $timeout if $watch is fast enough to your need, which means $timeout is the way to explicitly trigger the $watch, where as $apply can do it by itself. So the use of $timeout or $apply is depends on how your requirement is. Hope this clears you. Good luck.

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

This is because you are not working with the $http promise in the right way.

Following code is not tested, but shows how you could solve your problem. Note the return $http. Here you return the promise and handle the promise in your code.

$scope.update = function () {
  quickLinksServices.quickLinksAPI.getQuickLinks().then(function(data){
        $scope.links = data;
     }
    );
 };


quickLinksServices.factory('quickLinksAPIService', function ($http, $timeout) {
    quickLinksAPI.getQuickLinks = function (success) { return $http({
        method: 'JSON',
        url: '/devices/getquicklinkcounts'
    });
    });
}

If you can't make it work this way because of design decisions, you still have to work with promises ($q). If you want to know more about promises here is a good thread on stackoverflow.

edited May 23 '17 at 11:59

Community

1
1

answered Dec 16 '14 at 13:03

Manuel B.

115
7

Hi, I actually sometimes cache the result locally which is why I do it this way, how can I rewrite http://jsfiddle.net/m6cgwwL3/1/ to use `$q` instead? – Chris Dec 16 '14 at 13:37
I suppose a more pertinent question is, should I have the caching code within the factory or in my controller? – Chris Dec 16 '14 at 13:42
If I update my code to simply return `$http` it still doesnt apply – Chris Dec 16 '14 at 13:48
Sorry but I can't rewrite your whole code structure. Just adding return to your $http is probably not working, because you're not calling the getQuickLinks directly. You have to return the promise in the apiService.getLinks as well. – Manuel B. Dec 16 '14 at 14:34

Why is $timeout is needed for watch to trigger

2 Answers2