异步调用AngularJS后$ scope未更新

时间:2016-10-31 20:56:25

标签: javascript angularjs

我有一个正在进行API调用的服务,抓取JSON文件的路径,然后通过代理运行它来绕过CORS,然后将值返回给我的控制器,我可以将它传递给{{1但是在运行该函数时我无法更新HTML中的任何内容,我尝试了console.log()但是出现了摘要错误。还尝试使用$ scope。$ applyAsync()

我的服务

$scope.$apply

我的控制器

mywow.service('auctionService', function($http) {
    this.getData = function(realmName) {
        return $http.get('https://us.api.battle.net/wow/auction/data/' + realmName + '?locale=en_US&apikey=xxxx').
        then(function(response) {
            var urlToJsonFileUncut = response.data.files[0].url;
            urlToJsonFile = urlToJsonFileUncut.slice(7);
            console.log("URL to JSON file: " + urlToJsonFile);

            return $http.get('http://localhost:1337/' + urlToJsonFile).
            then(function(response) {
                console.log("Response from Service: " + response.data.realms[0].name);
                return response.data.realms[0].name;
            });
        });
    }
});

我的HTML

   //Auction controller
mywow.controller('auctionCtrl', function($scope, $firebaseArray, auctionService, $timeout, $q) {
    var self = this;
    self.realms = loadAll();
    self.selectedItem = null;
    self.searchText = null;
    self.querySearch = querySearch;
    $scope.test = "waiting for you to choose!"; //here is where I assigned test
    //search
    function querySearch(query) {
        var results = query ? self.realms.filter(createFilterFor(query)) : self.realms;
        var deferred = $q.defer();
        $timeout(function() { deferred.resolve(results); }, Math.random() * 1000, false);
        return deferred.promise;
    };
    //get all of the realms
    function loadAll() {
        var allRealms = "Wyrmrest Accord, Ysera, Ysondre, Zangarmarsh, Zul'jin, Zuluhed";
        return allRealms.split(/, +/g).map(function(realm) {
            return {
                value: realm.toLowerCase(),
                display: realm
            };
        });
    };
    //chnage realm to lowercase
    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(realm) {
            return (realm.value.indexOf(lowercaseQuery) === 0);
        };
    };

    //send realm name to auction service and run the call
    function Init(realmNameFromGo) {
        auctionService.getData(realmNameFromGo).then(function(data) {
            console.log("From controller: " + data);
            $scope.realmName = data;
        });
    };


    //Go button
    $scope.realmGo = function() {
        Init(self.selectedItem.value);
    };


});

0 个答案:

没有答案