Angular JS - instantly updating view

Question

I would like to instantly update {{card.likeCount}} (on the HTML page) when user click on like anchor tag.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>

            <li>
                <i class="fa fa-eye">
                </i>
                {{card.likeCount}}
            </li>
            <li>
                <a  href="#" ng-click="likingCard(card.id)" name>
                    Like
                    </i>
                </a>
            </li>

This is how I currently do it, I add this code to cardCtrl, I'm not sure if I'm using the right approach:

    $scope.likingCard = function(id) {
    $http.post('/card/like/', {
        id: id
    }).then(function onSuccess(result, status, headers, config) {

        setTimeout(function() {
            $scope.likeCount = parseInt(result.data.likeCount);
            console.log($scope.likeCount);
            $scope.$digest();
        }, 1000);

    }).catch(function onError(err) {
        console.log('Error:', err);
    })
}

Duncan · Accepted Answer · 2016-02-05 09:19:31Z

I don't understand why, when you say "instantly update", you have inserted a deliberate 1 second delay after receiving the response before you update the model.

If you don't want the delay, just update the model:

$scope.likingCard = function(id) {
    $http.post('/card/like/', {
        id: id
    }).then(function (result) {
            $scope.likeCount = parseInt(result.data.likeCount);
            console.log($scope.likeCount);
    }).catch(function (err) {
        console.log('Error:', err);
    })
}

If you do want the delay then don't use setTimeout, use $timeout instead and you won't need the explicit call to $digest.

$scope.likingCard = function(id) {
$http.post('/card/like/', {
    id: id
}).then(function (result) {

    $timeout(function() {
        $scope.likeCount = parseInt(result.data.likeCount);
        console.log($scope.likeCount);
    }, 1000);

}).catch(function (err) {
    console.log('Error:', err);
})

}

Yogesh · Accepted Answer · 2016-02-05 08:48:23Z

0

make use of ng-cloak directive

<body ng-cloak>
<!-- all your angular stuff here -->
</body>

you can also use ng-cloak directly on <html> tag

for more details check documentation here

https://docs.angularjs.org/api/ng/directive/ngCloak

answered Feb 5, 2016 at 8:48

Yogesh

1,5952 gold badges20 silver badges46 bronze badges

Collectives™ on Stack Overflow

Angular JS - instantly updating view

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related