AngularJS。吴秀。在数据加载到 $scope 后显示 html

Question

数据插入$scope后需要显示html模板。代码如下。上班了。

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 是在 promise 解析之后，但在数据插入范围之前显示的。可以吗？不是，怎么解决？

Answer 1

由于 angularjs 严格的双向绑定，这不会给您带来任何问题。事实是，当 promise 被解决时，它会立即调用回调，并显示 div。

请注意，如果您使用的是双花括号绑定，您可能会闪烁 {{youvar}} 之类的内容。为避免此问题，请改用 ng-bind。

AngularJS。吴秀。在数据加载到 $scope 后显示 html

AngularJS. ng-show. Show html after data was loaded into $scope

angularjs

ng-show

angularjs-ng-route