Shared variables do not update after http request

Question

Shared variables do not update after http request

Navigation

#1 by (0 votes)

1

I created a Service to be able to share a variable with my entire application, but the value is not being updated:

The service only queries the server to return the number of pending users
And I'd like this value to be shared across multiple application locations, in this case I'm showing you what it would look like with the header, it shows a pending user counter
After the query, the returned value is correct and I give a console.log in the variable "service.pendingUsersCount" and the value is correct, but in the view it remains the same

// MEU SERVICE
(function() {
    'use strict';

    angular
        .module('meuModulo')
        .factory('UserPendingService', UserPendingService);

    UserPendingService.$inject = [
        'UserService',
        'Restangular'
    ];
    function UserPendingService(UserService,
                                Restangular) {

    var service = {};

    service.pendingUsersCount = 2;

    _activate();

    return service;

        function _activate() {
            UserService.searchPendingUsers()
                       .then(_successFn, _errorFn);

            function _successFn(response) {
                service.pendingUsersCount = response.data.count;
                // O valor é imprimido corretamente, porém a variavel "pendingUsersCount" não é atualizada na view
                console.log(service.pendingUsersCount); 
            }

            function _errorFn(response) {

            }
        }
    }
})();


// UM DOS LOCAIS DA APLICAÇAO A ONDE ESTE SERVICE É UTILIZADO
(function () {
    'use strict';

    angular
        .module('meuModulo')
        .directive('headerNotification', headerNotification)
        .controller('HeaderNotificationController', HeaderNotificationController);

    headerNotification.$inject = [
        'APP_PATH'
    ];
    function headerNotification(APP_PATH) {
        return {
            templateUrl:      'header-notification.view.html',
            restrict:         'E',
            replace:          true,
            controller:       HeaderNotificationController,
            controllerAs:     'headerNotificationCtrl',
            bindToController: true,
        }
    }

    HeaderNotificationController.$inject = [
        'UserPendingService'
    ];
    function HeaderNotificationController(UserPendingService) {
        var vm = this;

        vm.models = {
            usersCount: UserPendingService.pendingUsersCount
        };
    }

})();

javascript angularjs

asked by anonymous 05.12.2015 / 22:45

1 answer

Remove border from image when clicked Validation of javascript fields?

score 0 · Accepted Answer

Most likely your mistake is because you are using a variable to refer to your controller and thus the controller is not notified of the update. To solve the problem, you can use the $scope of entry in the function, if it still does not solve you can force the angle through $apply to make a $digest in your model:

Or upgrade your template within a $scope.$apply(function(){...})

Try:

function HeaderNotificationController(UserPendingService, $scope) {
    $scope.models.usersCount = UserPendingService.pendingUsersCount;
}

Or:

function HeaderNotificationController(UserPendingService, $scope) {
    $scope.$apply(function(){
         $scope.models = {
                usersCount: UserPendingService.pendingUsersCount
          };
    });
}