2015-12-09 1 views
0

Необходимо отобразить 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 отображается после того, как обещание будет решена, но прежде, чем данные вставлены в рамки. Это нормально? Нет, как это можно исправить?

ответ

0

Это не создает никаких проблем из-за строгой двусторонней привязки угловых символов. Дело в том, что, когда обещание решено обратным вызовом, оно называется istantly как первое, а div отображается.

Опасайтесь, если вы используете привязку с двойными фигурными скобками, чтобы вы могли намотать что-то вроде {{youvar}}. Чтобы избежать этой проблемы, вместо этого используйте ng-bind.

Смежные вопросы