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

这一行：

$scope.image = $timeout(function(){getRandomImage();}, 3000);

将$ timeout调用的返回值放入$ scope.image变量，该返回值（根据$ timeout documentation）是一个promise对象。

相反，您可能希望在一定的超时后将getRandomImage函数的返回值放入图像变量中，如下所示：

$timeout(function(){$scope.image = getRandomImage();}, 3000);

Answer 2

你可以移动在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);
        }
    });
}

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

2 个答案: