AngularJS scope variables not updating in jQuery promise/deferred

Question

I am building a single page application on AngularJS and I have a controller set up with a function that is run on a button click. This function runs with a promise. When the function is resolved I am updating a root variable and changing the $location path. But the root variable and $location dont seem to be updating.

Please note this all code is exampled from production

DOM:

<div ng-controller="ExampleController">
    <button ng-click="button_function('I am a variable')">Run function</button>
</div>

Controller:

app.controller('ExampleController', ['$scope', '$location', function($scope, $location) {

    $scope.button_function = function(variable) {
        $scope.$root.show_something = true;

        my_function.something(variable).done(function(data) {
            if (data) {
                $scope.$root.show_something = false;
                $location.path('/go-to-path');
            } else {
                alert('Something went wrong');
            }
        }]);
    };

}]);

This is the my_function code:

var my_function = {
    something: function(variable) {
        var deferred = $.Deferred();

        var window = window.open('http://dynamic.url/', '_blank');

        $(window).on('loadstart', function(e) {
            var url = e.originalEvent.url;

            if (url === 'http://dynamic.url/expected_response') {
                window.close();
                deferred.resolve({
                    key_1: 'data',
                    key_2: 'more data'
                });
            }

        });

        return deferred.promise();
    }
};

All looks good right? But when the my_function.something(variable) is "done" the $location and $scope.$root.show_something don't seem to update.

Am I doing something wrong?

Thanks

Possible duplicate of How to update controller variable from jquery? — Jorrex
– Jorrex, Commented Jul 29, 2016 at 9:38

DiDay · Accepted Answer · 2016-07-29 10:01:55Z

0

You should return deferred.promise instead of deferred.promise().

--edit: my bad I didn't see you are not using $q as I misread.

answered Jul 29, 2016 at 10:01

DiDay

113 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:14:53Z

0

I have found the fix.

In my controller after the deferred is "done" I wrapped my variables in $timeout

app.controller('ExampleController', ['$scope', '$location', '$timeout', function($scope, $location, $timeout) {

    $scope.button_function = function(variable) {
        $scope.$root.show_something = true;

        my_function.something(variable).done(function(data) {
            if (data) {
                $timeout(function() {
                    $scope.$root.show_something = false;
                    $location.path('/go-to-path');
                }, 1);
            } else {
                alert('Something went wrong');
            }
        }]);
    };

}]);

Answer found here

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Aug 1, 2016 at 15:49

Levi Cole

3,7041 gold badge27 silver badges38 bronze badges

Collectives™ on Stack Overflow

AngularJS scope variables not updating in jQuery promise/deferred

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related