Необходимо отобразить html-шаблон после того, как данные будут вставлены в $ scope. Код ниже. Это работает.
var b2buiDemo = angular.module('b2buiDemo', [...]);
b2buiDemo.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/exthtlcd', {
templateUrl: 'partials/exthtlcd-list.html',
controller: 'ExternalHotelCodeListCtrl',
resolve:{list:function(ExternalHotelCodeRestClient){
return ExternalHotelCodeRestClient.getPage();
}}
}).
otherwise({
redirectTo: '/exthtlcd'
});
}]);
b2buiDemo.run(['$rootScope', function($root) {
$root.$on('$routeChangeStart', function(e, curr, prev) {
if (curr.$$route && curr.$$route.resolve) {
// Show a loading message until promises aren't resolved
$root.loadingView = false;
console.log("HIDE");
}
});
$root.$on('$routeChangeSuccess', function(e, curr, prev) {
// Hide loading message
$root.loadingView = true;
console.log("SHOW");
});
}]);
var externalHotelCodeCtrls = angular.module('externalHotelCodeCtrls', []);
externalHotelCodeCtrls.controller('ExternalHotelCodeListCtrl',['$scope', 'list',
function($scope,list){
console.log("FILL SCOPE 1");
$scope.list=list.data;
console.log("FILL SCOPE 2");
}]);
var externalHotelCodeRestClientServices = angular.module('externalHotelCodeRestClientServices', []);
externalHotelCodeRestClientServices.factory('ExternalHotelCodeRestClient',['$http','$q',function($http,$q){
return{
getPage: function(){
var promise = $http.get('***');
promise.success(function(data){
console.log('SUCCESS');
console.log(data);
return data;
});
return promise;
}
}
}]);
exthtlcd-list.html
<div ng-show='loadingView'>...</div>
Похоже, все в порядке. Пустой шаблон не отображается.
НО посмотрите на консоль вывода: ЗАКРЫТЬ >> УСПЕХА >> ШОУ >> ЗАПОЛНЕНИЯ ОБЛАСТЬ 1 >> ЗАПОЛНЕНИЯ ОБЛАСТЬ ПРИМЕНЕНИЯ 2
Похоже, HTML отображается после того, как обещание будет решена, но прежде, чем данные вставлены в рамки. Это нормально? Нет, как это можно исправить?