Question

这是一个简单的网上商店。所以我想在显示主页和控制器之前加载一些东西。

我决定index.html也是包含标题的母版页，路由模板的ui视图，包含类别和页脚的侧边栏。

<body ng-app="app">
    <header ng-include="'./templates/masterPage/header.html'"></header>
    <div ui-view></div>
    <sidebar ng-include="'./templates/masterPage/sideBar.html'"></sidebar>
    <footer ng-include="'./templates/masterPage/footer.html'"></footer>
</body>

标题，侧边栏和页脚上的内容将来自一个json文件，其中包含我需要的所有内容，例如类别，货币，网店名称以及其他在加载后永远不会更改的内容。

所以，我创建了以下app.js ......

angular
.module('app', [
    'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider',
    function ($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'templates/common/home.html',
                controller: 'homeCtrl',
            })
}])
.run(function ($rootScope, $http) {
    $rootScope.api = "http://127.0.0.1:5000/demoShop";
    var call = $rootScope.api + "/frontEnd/loadStructure";
    $rootScope.webshop = $http.get(call).then(function (response) {
        console.log('1');
        return response.data;
    });
    console.log("2");
})

问题是：检查console.logs到底.... 2在1之前执行因为我不能让$ http等到转到下一行。我该怎么办？

在做任何事情之前，我需要在rootscope上填充webshop变量。

Answer 1

简单回答： 你不能。

更长的回答：您可以等待AJAX请求完成。这就是你已经在做的事情 - 这是.then中的功能。你可以把你的代码放在那里。问题是 - 为什么你需要先完成它？或者更好的问题是为什么你需要在控制器中执行请求？这不是太晚了吗？见related answer from Misko Hevery。

Answer 2

我建议在根路由的homeCtrl加载时解析数据。然后你可以访问你的webshop数据apon instaciation控制器。请考虑以下示例：

angular
.module('app', [
    'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider',
    function ($urlRouterProvider, $stateProvider) {
      var resolveLoadStructure = function() {
        $rootScope.api = "http://127.0.0.1:5000/demoShop";
        var call = $rootScope.api + "/frontEnd/loadStructure";
        return $http.get(call);
      };

      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'templates/common/home.html',
        controller: 'homeCtrl',
        resolve: {
          loadStructure: resolveLoadStructure
        }
      });
}])
.controller('homeCtrl', function($scope, loadStructure) {
  $scope.webshop = loadStructure;
})

Answer 3

我发现了问题。我的错误是直接设置$ rootScope - 而是将内部设置为回调。我做了一个小手术，一切正常。看看

.run(function ($rootScope, $http) {
    $rootScope.nodeshop = "http://127.0.0.1:5000/rawDemo";
    var call = $rootScope.nodeshop + "/frontEnd/loadStructure";
    var head = {}; 
    $http.get(call).then(function (response) {
        $rootScope.webshop = response.data; //See ? this variable is no longer set as result of the $http return !
        return response.data;
    });
})

Angular - 等待$ http完成，直到转到下一行

3 个答案: