AngularJS AppCtrl等待HTTP事件成功

我都是新來AngularJS，需要一些幫助，我有一個「AppCtrl」，並從那裏我有一個HTTP Web服務調用 - 並需要在我的其他控制器訪問的Web服務調用響應。AngularJS AppCtrl等待HTTP事件成功

angular.module('starter.controllers', []) 

.controller('AppCtrl', function($scope, $http) { 

    $scope.webservice_url = "http://webserviceurl.com/"; 

    $http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) { 
     $scope.stations = data.stations; 
    }); 
})

這工作得很好 - 我可以在我的模板訪問$ scope.stations - 但現在我要訪問我的「PlaylistCtrl」控制器$ scope.stations，但這是未定義:(

.controller('PlaylistCtrl', function($scope, $stateParams) { 
    console.log($scope.stations); // is undefined :(
})

我怎樣才能確保HTTP調用是「PlaylistCtrl」前「完成」（成功）加載...

來源

2014-06-19 pkdkk

你應該將HTTP投入運營/工廠工作，如果可能的

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, dataService) { 
    dataService.then(function (data) { 
    $scope.data = data 
    }) 
}); 


app.controller('SecondCtrl', function($scope, dataService) { 
    dataService.then(function (data) { 
    $scope.secData = data 
    }) 
}); 

app.service('dataService', function ($http, $q){ 
    var defferer = $q.defer() 

    $http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').success(function (data){ 
    defferer.resolve(data) 
    }) 

    return defferer.promise 
})

http://plnkr.co/edit/8k97DngZ8KoFOBPFJG82?p=preview例如

來源

2014-06-19 09:00:32 maurycy

$scope.stations IST在PlayListCtrl沒有不確定，因爲HTTP調用還沒有完成，但由於PlayListCtrl有一個不同的$scope比AppCtrl。

您應該將web服務調用放入服務中，並將該服務注入到所有需要它的控制器中。

來源

2014-06-19 08:45:19

謝謝，這是有意義的 - 但我不知道如何做一個服務，以及如何注入它 - 你有一個例子嗎？ ;） – pkdkk

-4

// Make a remote request. 
$http.get('some wonderful URL for a service').success(function (results) { 
    superImportantInfo = results; 

    semaphore = true; 
}); 

while (!semaphore) { 
    // We're just waiting. 
}

這是如何讓你的控制器等待，直到它完成控制器1的執行，並在移動到下一個控制器之前。

希望得到這個幫助！

來源

2014-06-19 08:49:47

Maby我小哈克;）..但我會嘗試.- – pkdkk

在Angular中，您不需要等待渲染前的數據。即使數組最初爲空，您也可以讓它呈現，然後一旦數據返回，就會再次呈現。 Angular會這樣做以保持高水平的響應。這是設計，而不是你應該嘗試改變的東西。

您需要做的所有修復未定義變量的操作是在您的控制器中初始化stations範圍變量。雖然數據在從服務中返回時會被覆蓋，但這並不重要，因爲角度將通過參考監視範圍變量的更改，並在更新所有視圖時進行更新。

angular.module('starter.controllers', []) 

.controller('AppCtrl', function($scope, $http) { 

    $scope.webservice_url = "http://webserviceurl.com/"; 

    $scope.stations = []; 
    $http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) { 

     $scope.stations = data.stations; 
    }); 
})

在你內心的控制器，如果數據尚未返回，$ scope.stations將是一個空數組：

.controller('PlaylistCtrl', function($scope, $stateParams) { 
    console.log($scope.stations); // is [] 
    $scope.$watch('stations', function(newVal) { 
     alert('data returned!! updating views!'); 

    }); 
})

一旦數據返回時，示波器上的數組引用覆蓋後，將調用任何$ watch處理程序來更新視圖。

來源

2014-06-19 08:56:00 pixelbits

AngularJS AppCtrl等待HTTP事件成功

回答

相關問題