Question

我使用来自get调用的数据填充$ scope：

httpGetAsync("myUrlWasHere", getBlogPosts, $scope);

我的回调似乎是正确返回数据，因为我在打印时在控制台上得到以下输出console.log($scope)：

但是，如果我尝试使用console.log($scope.blogPosts)访问它，则会返回undefined：

我的回调函数是：

function getBlogPosts(param, $scope) {
    $scope.blogPosts = JSON.parse(param);
}

我想要的是能够将blogPosts.items内的数组传递给Angular，以便使用ng-repeat。

这是控制器：

   websiteApp.controller('BlogController', function BlogController($scope) {
        console.log("blog loaded");
        httpGetAsync("myUrlHere",
                 getBlogPosts,
                 $scope);

    //console.log($scope);
    console.log($scope.blogPosts);

});

请注意，这些都是我用来为您提供屏幕截图的console.log。我错过了什么？我怎么能异步解决它？

Answer 1

httpGetAsync()是异步的（名称中）。

因此，您的程序流似乎是：

运行httpGetAsync()功能。
console.log($scope.blogPosts)（因为数据不在，而且还没有调用回调，所以不起作用）
从httpGetAsync()函数加载的数据。
console.log($scope)（因为已经调用了回调函数）。

确保在调用回调后运行访问$scope.blogPosts的代码。例如，在回调函数的末尾运行console.log($scope.blogPosts)。

Answer 2

使用AngularJS $http服务异步执行GET请求。

websiteApp.controller('BlogController', function BlogController($scope, $http) {
    console.log("blog loaded");
    $http.get("myUrlHere").then(function onSuccess(response) {
         $scope.blogPosts = response.data;
         console.log($scope.blogPosts);
    }).catch(function onReject(response) {
         console.log("Error ",response.status);
    });    
});

$http服务与AngularJS摘要周期集成在一起。

有关详细信息，请参阅AngularJS $http Service API Reference。

Answer 3

问题是你传递给$ scope的问题没有传递给$ scope.blogPosts，所以如何解决这个问题首先在函数中定义一个范围，然后将数据拉入其中，如果它在不同的服务器js文件然后使用路由来执行此操作，但如果在相同的js文件中，则：

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        videoId: 'sAhYEfQ1168',
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'autohide': 1,
            'wmode': 'opaque',
            'showinfo': 0,
            'loop': 1,
            'rel':0
        },
        events: {
           'onReady': onPlayerReady
        }
    });

}

function onPlayerReady(event) {
    event.target.playVideo();
    player.mute();
}

然后你要做的是通过在函数中使用$ scope.data.blogPosts来设置值，然后再次，我不知道你是如何在没有服务器js文件和路由。

Answer 4

您能否向我们展示您的httpGetAsync方法？你尝试过使用承诺吗？

websiteApp.controller('BlogController', function BlogController($scope) {
    console.log("blog loaded");
    httpGetAsync("myUrlHere", getBlogPosts, $scope)
    .then(function(data) {
        console.log($scope.blogPosts);
    })
});

无法访问$ scope.property，但可以在console.log（$ scope）上看到它

4 个答案: