CODEWITHSUNDEEP
javascriptangularjs
Jack
Jack

Reputation: 7557

changing $scope variables not updating view

I have a service that publishes some event based on certain condition. This code doesn't work:

 $scope.$on('INTEREST_RECEIVED', function (event, data) {
                if ($scope.user.userID == data.otherUserID) {
                    console.log($scope);
                    $scope.showAcceptDeclinePanel = true;
                    $scope.showInterestYesNoPanel = false;
                }

        });

But this one does:

 $scope.$on('INTEREST_RECEIVED', function (event, data) {
            $timeout(function () {
                if ($scope.user.userID == data.otherUserID) {
                    console.log($scope);
                    $scope.showAcceptDeclinePanel = true;
                    $scope.showInterestYesNoPanel = false;
                }
            }, 50);
        });

I have to keep a timeout of 50 ms and then it works perfectly. Am I missing something or why would this happen?

Upvotes: 0

Views: 702

Answers (1)

CodePrimate
CodePrimate

Reputation: 6666

Try calling $apply on your scope after the event is triggered:

$scope.$on('INTEREST_RECEIVED', function (event, data) {
                if ($scope.user.userID == data.otherUserID) {
                    console.log($scope);
                    $scope.showAcceptDeclinePanel = true;
                    $scope.showInterestYesNoPanel = false;
                    $scope.$apply()
                }

        });

Upvotes: 2

Related Questions