angularjs : update value of a variable After external timeout function call

Question

I have a controller and a factory. A function(myfunc) inside the factory(searchFactory) is called by ng-click of a button. after which I call a function(waitfunction) which is outside the conntroller. In that function timeout of 2 sec is used and then a value is changed and returned to the controller. How can I make sure that the value is updated in the controller after 2 sec. JSfiddle : http://jsfiddle.net/zohairzohair4/cRr9K/1334/

var search_name  
var angularjsapp = angular.module('graphApp', ['ngAnimate', 'ui.bootstrap']);

angularjsapp.factory('searchFactory', function() {
  //return $resource('friends.json');
  return{
        myfunc:function(search_name){
            console.log('ok')
            keyword_type = 1
            loading_value = waitfunction(search_name)
            console.log(loading_value)
            return loading_value
            }
        }   
});

angularjsapp.controller('AccordionDemoCtrl', function($scope,searchFactory) {
    $scope.count = 0;
    $scope.namesPerPage = 10
    $scope.currentPage = 1;
    $scope.searchFactory = searchFactory.myfunc 
});

function waitfunction(search_name){
            value = 0
            window.setTimeout(function () {
                        value = 1;
                    }, 2000);
            return value        
        };

Sounds like a dup of this one stackoverflow.com/questions/14220321/… — elclanrs
– elclanrs, Commented Jun 29, 2016 at 12:13

Per Hornshøj-Schierbeck · Accepted Answer · 2016-06-29 12:52:17Z

2

Using the setTimeout function will bypass angular's dirty checking. If you want to use async functionality outside of angulars dirty-checking, you need to trigger angular to do the dirty checking again. You can do that by calling $scope.$apply(); or wrap your async call with a function like this:

$scope.$apply(function() {
...
});

For your specific need - angular already have a number of async methods to replace the default javascript ones and i'd suggest you use that instead of javascripts timeout:

$timeout(function () {
  value = 1; 
}, 2000);

You can read more about $timeout here: https://docs.angularjs.org/api/ng/service/$timeout

Your waitfunction doesn't seem to be doing what you want it to do. It will return the value long before the timeout changes it. This happens because you're just referencing a simple value. If you pass an object and modify that objects property, then you can achieve what you're trying to do:

function waitfunction(search_name){
    var obj = { value: 0 };
    $timeout(function () {
      obj.value = 1;
    }, 2000);
    return obj;       
};

You then need to bind to the returning objects .value property instead.

I see your plunker and there is a lot of work to be done. It doesn't seem like you're binding the resulting object to anything. I think this post helps to solve atleast the async problem associated with calling setTimeout and the problem of binding to simple values.

answered Jun 29, 2016 at 12:52

Per Hornshøj-Schierbeck

15.2k21 gold badges84 silver badges103 bronze badges

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

2 Comments

Zohair Zahid Over a year ago

Error: $scope is not defined

Per Hornshøj-Schierbeck Over a year ago

@ZohairZahid there is so much work to be done in your example, I don't know where to start. You don't need to wrap a call to $timeout in $scope.$apply. The reason your $scope is undefined is because it's not in your controller. You are not using the value from the wait anywhere. I see lots of code not doing anything and lots of stuff not hooked up...

Per Hornshøj-Schierbeck · Accepted Answer · 2016-07-07 06:53:15Z

0

You need to use $timeout

$timeout(function() {
                value=1;
            }, 2000);

edited Jul 7, 2016 at 6:53

Per Hornshøj-Schierbeck

15.2k21 gold badges84 silver badges103 bronze badges

answered Jun 29, 2016 at 12:41

zeeshan Qurban

3871 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

angularjs : update value of a variable After external timeout function call

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related