Angular JS - 即時更新視圖

當用戶點擊像錨標籤時，我想立即更新{{card.likeCount}}（在HTML頁面上）。Angular JS - 即時更新視圖

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

這是我現在該怎麼辦呢，我這個代碼添加到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); 
    }) 
}

來源

2016-02-05 Amy Lee

化妝使用ng-cloak指令

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

你也可以使用ng-cloak直接在<html>標籤

以瞭解詳情文檔這裏

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

來源

2016-02-05 08:48:23 Yogesh

我不明白爲什麼，當你說「即時更新」，你已經接收到響應之後插入故意延遲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); 
})

}

來源

2016-02-05 09:19:31 Duncan

Angular JS - 即時更新視圖

回答

相關問題