Question

当用户点击锚标记时，我想立即更新{{card.likeCount}}（在HTML页面上）。

＆＃13;

<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>

＆＃13;

这就是我目前的做法，我将此代码添加到cardCtrl，我不确定我是否使用了正确的方法：

    $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);
    })
}

Answer 1

我不明白为什么，当您说＆＃34;立即更新＆＃34;时，您在更新模型之前收到响应后插入了故意的1秒延迟。

如果您不想要延迟，只需更新型号：

$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);
    })
}

如果你确实想要延迟，那么请不要使用setTimeout，而是使用$timeout，而您不会需要显式调用$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);
})

}

Answer 2

使用ng-cloak指令

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

您也可以直接在<html>代码

上使用ng-cloak

有关详细信息，请查看此处的文档

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

Angular JS - 即时更新视图

2 个答案: