Я называю webservice, который возвращает ответ JSON. Я хочу привязать эти данные json для просмотра с помощью ng-repeat. Я использую один и тот же контроллер для обоих экранов.
Вот как выглядит поток:
Мой код:
angular.module('controller').controller('Ctrl1', function($scope, $state, $http) {
$scope.myList;
$scope.getUserList = function() {
$http({
method: 'GET',
url: someurl,
}).then(function(response) {
//success
if (response.data.status == "OK") {
$scope.myList = response.data.data;
$state.go('screen2');
}
}, function(response) {
alert('failed');
});
}
Мой вид (экран2):
<ion-view view-title="Select User">
<ion-header-bar class="bar-user">
<h1 class="title">Select User</h1>
</ion-header-bar>
<ion-content class="padding">
<div class="mainWrap">
<div class="text-title">
Lorel ipsum
</div>
<div class="list user">
<a class="item item-icon-left" href="#" ng-repeat="v in myList">
<i class="icon ion-wifi"></i>
{{v.name}}
</a>
</div>
</ion-content>
</ion-view>
Когда я жестко задаю и присоединяю эти данные json непосредственно к области контроллера. Все работает нормально. Но когда я связываю тот же json в ответе $ http. Ничего не работает.
Ответ Webservice:
{
"status": "OK",
"data": [
{
"name": "lorel",
"type": "off"
},
{
"name": "edimax",
"type": "on"
},
{
"name": "ipsum",
"type": "on"
},
{
"name": "blah blah",
"type": "on"
}
]
}
$scope.myList
к одному контроллеру.
Каждый член $scope
привязан к контроллеру, который должен быть привязан к представлению.
Я подозреваю, что вы используете один и тот же контроллер для двух разных видов; может быть, что-то вроде этого:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'homeController',
})
.state('screen2', {
url: '/screen2',
templateUrl: 'screen2.html',
controller: 'homeController',
});
Это нехорошо. Всегда лучше иметь контроллер для просмотра.
Во всяком случае, поскольку вы хотите обмениваться данными, вам нужно использовать какой-то кеш. Вы можете использовать сервис.
Вы можете создать что-то вроде этого:
(function() {
'use strict';
angular
.module('app.services', [])
.factory('dataService', dataService);
dataService.$inject = ['$q', '$http'];
/* @ngInject */
function dataService($q, $http) {
var service = {
myList: [],
fetchData: fetchData
};
return (service);
function fetchData() {
// Do some sort of $http request and fill the list.
var deferred = $q.defer();
this.myList = [];
this.myList.push({name: 'AAA'});
this.myList.push({name: 'BBB'});
this.myList.push({name: 'CCC'});
deferred.resolve(this.myList);
return deferred.promise;
}
}
})();
Эта служба имеет коллекцию myList
которая заполняется при fetchData
метода fetchData
. Я использовал обещание имитировать запрос $ http в вашем контроллере.
Ваш контроллер должен выглядеть так:
angular.module('controller').controller('Ctrl1', function($scope, $state, dataService) {
$scope.myList = dataService.myList;
$scope.getUserList = function() {
dataService.getUserList()
.then(function(response) {
//success
if (response.data.status == "OK") {
// $scope.myList = response.data.data;
$state.go('screen2');
}
}, function(response) {
alert('failed');
});
}
});
Вам необходимо ввести службу dataService
и запросить список, чтобы вы могли заполнить массив в области вашего контроллера:
$scope.myList = dataService.myList;
Когда вы вызываете метод $scope.getUserList()
в своем контроллере, dataService будет извлекать данные:
dataService.getUserList()
и заполнить внутренний список, поэтому, когда вы перейдете в другое состояние, у dataService будет заполнен список, и область будет загружена новыми данными:
$scope.myList = dataService.myList;
Это плункер, где вы можете протестировать эксперимент.
PS: Я использовал один и тот же контроллер для другого состояния/представления, но, опять же, я бы этого не сделал.