Как удалить неопределенную ошибку в угловых js? На самом деле, я пытаюсь загрузить данные с использованием разрешения и использовать эти данные в контроллере, но на контроллере я получаю неопределенное значение почему?
resolve: {
message: function (testservice) {
return testservice.getdata();
},
message2: function (testservice) {
return testservice.getTodo();
},
message3: function (testservice) {
return testservice.getGithub();
}
}
использовать контроллер
.controller('b', function($scope, $stateParams, $state, $ionicHistory,message) {
console.log("controller is loaded"+message)
})
//undefined в этой консоли
console.log("controller is loaded"+message)
Я бы сказал, что вы почти там.
Просто сервис/завод должен что-то вернуть. Я имею в виду здесь:
...
message: function(testservice) {
return testservice.getdata();
}
мы чего-то ожидаем... и ничего не было
Я добавил return data;
одной строки return data;
и есть обновленный плункер
.factory('testservice', ['$http',
function testservice($http) {
// interface
// implementation
function getData() {
return $http.get("http://jsonplaceholder.typicode.com/photos")
.then(function(data) {
console.log(data)
// HERE - this line was missing
// return something here
return data;
}, function(error) {
console.log(error)
})
Основываясь на некоторых комментариях, я привел пример здесь. В настоящее время показано это мнение:
loadingB.html
<div >
<div ui-view="">
<h2>...loading...</h2>
</div>
</div>
что является взглядом на совершенно новое родительское состояние 'loadingB'
:
.state('loadingB', {
redirectTo: "b",
templateUrl : "loadingB.html",
})
Он вводит вышеуказанный вид loadB.html в положение исходного состояния "b". И он имеет одно свойство redirectTo: "b"
, которым управляет этот небольшой кусок кода:
.run(['$rootScope', '$state', function($rootScope, $state) {
$rootScope.$on('$stateChangeSuccess', function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params)
}
});
}])
И наша служба теперь использует $timeout
для получения некоторой задержки:
.factory('testservice', ['$http', '$timeout',
function testservice($http, $timeout) {
// interface
// implementation
function getData() {
return $http.get("http://jsonplaceholder.typicode.com/photos")
.then(function(data) {
console.log("resolved http")
return $timeout(function(){
console.log("after two seconds delay")
return data;
}, 2500)
...
И, наконец, мы должны перенаправить на loadingB
здесь
$scope.moveto = function() {
$state.go('loadingB');
}
А также сделать "b" ребенком "laodingB"
.state("b", {
parent: "loadingB",
templateUrl: "b.html",
url: "/b",
controller: 'b',
resolve: {
message: function(testservice) {
return testservice.getdata();
},
Проверьте все здесь
Radim Koehler имеет правильный ответ или даже проще, просто верните обещание функции getData в службе:
function getData() {
return $http.get("http://jsonplaceholder.typicode.com/photos");
}
Если вы хотите разрешить состояние перед входом в просмотр, вам нужно сделать несколько вещей. решите, что вы так заявляете
.state('app.b', {
url: "/b",
views: {
'menuContent': {
templateUrl: "b.html",
controller: 'b',
resolve: {
apiData: "testservice",
itemDetailsData: function($q, apiData) {
var item = apiData.getdata();
if (item) {
return $q.when(item);
} else {
return $q.reject();
}
}
}
}
}
})
в ваших службах вы можете иметь заводский метод:
.factory('albumService', ['$http', '$q', '$ionicLoading', '$timeout', albumFn])
function albumFn($http, $q, $ionicLoading, $timeout) {
return {
getAlbums: function() {
$ionicLoading.show({
content: '<i class="icon ion-loading-d"></i>',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 5
});
var def = $q.defer();
$http.get("data.json")
.success(function(data) {
$ionicLoading.hide();
def.resolve(data);
})
.error(function() {
$ionicLoading.hide();
def.reject("Failed to get albums");
});
return def.promise;
}
}
}
Я создал подобную демонстрацию plunker здесь