javascript - $interval 不允许我更新我的前端

Question

我正在尝试创建一个登陆页面，其中图片和随附的标题会更新，以对象数组(带标题的图片)显示所有图像和标题。我认为它需要使用 $interval 或 $timeout。

我的 JS 将显示一张不更新的图片:

.controller('userCtrl', function ($scope, Auth, $location, $timeout) {
    var Picture = Parse.Object.extend("Picture");
    var query = new Parse.Query(Picture);
    query.find({
         success: function(pictures){
             var x = pictures.length;
             var getRandomImage = function () {
                 var imageCount = x
                 var index = Math.floor(
                     ( Math.random() * imageCount * 2 ) % imageCount);
                 return( pictures[ index ] );
                } 
              $scope.image = getRandomImage();

           })

我认为我的 JS 应该可以工作，创建一个随机滚动的图片行:

.controller('userCtrl', function ($scope, Auth, $location, $timeout) {
    var Picture = Parse.Object.extend("Picture");
    var query = new Parse.Query(Picture);
    query.find({
         success: function(pictures){
             var x = pictures.length;
             var getRandomImage = function () {
                 var imageCount = x
                 var index = Math.floor(
                     ( Math.random() * imageCount * 2 ) % imageCount);
                 return( pictures[ index ] );
             }
             $scope.image = $timeout(function(){getRandomImage();}, 3000);

           })

我的 HTML 的关键部分:

<img id="logo" src= {{image.get('logo').url()}}>
<p>
   This is a picture ${{image.get('caption')}}
</p>

Answer 1

您可以在 interval func 中移动赋值，而且您不需要在每次回调时都创建函数 getRandomImage，因此您可以尝试这样的操作

.controller('userCtrl', function ($scope, Auth, $location, $timeout) {
    function getRandomImage(pictures) {
        var imageCount = pictures.length,
            index = Math.floor( ( Math.random() * imageCount * 2 ) % imageCount);
        return( pictures[ index ] );
    }

    var Picture = Parse.Object.extend("Picture");
    var query = new Parse.Query(Picture);
    query.find({
        success: function(pictures){
            $interval(function(){$scope.image = getRandomImage(pictures);}, 3000);
        }
    });
}