javascript - 在 Angular.JS 中获取数据后更改 ng-view

Question

我将使用 $http 和 JSON 响应从服务器获取一些数据。 $http.get() 在路由更改后调用。但是在下载数据之前会更改模板。我的目标是:

• 用户按下菜单中的超链接，改变路线，
• 显示正在加载的微调器(DOM 元素位于另一个每次都在页面上的 Controller 中)
• 在我的新模板中的 Controller 中初始化 $scope.init()(通过 ng-init="init()")，这也初始化获取数据从服务器
• 数据已下载，现在我可以隐藏微调器并更改可见模板

我该怎么做？我的应用程序看起来例如:

Javascript:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $http) {
    $scope.init = function() {
       $http({method: 'GET', url: 'http://ip.jsontest.com/'}).success(function(data) {
           console.log(data);
               $scope.ip = data.ip;
           });
    }
});

myApp.config(function($routeProvider) {

    $routeProvider.when('/link', {
        controller: 'MyCtrl',
        templateUrl: 'embeded.tpl.html'
    });
});

HTML:

<script type="text/ng-template" id="embeded.tpl.html">
    <div ng-controller="MyCtrl" ng-init="init()">
    Your IP Address is: {{ip}}
    </div>
</script>

<div>

    <ul>
        <li><a href="#/link">change route</a></li>
    </ul>

    <div ng-view></div>
</div>

Answer 1

您需要在路由发生之前解析数据，因此，将您的 $http 移至配置部分。

这是一个很好的教程，http://www.thinkster.io/pick/6cmY50Dsyf/angularjs-resolve-conventions

这是配置部分。

 $routeProvider.when('/link', {
    controller: 'MyCtrl',
    templateUrl: 'embeded.tpl.html',
    resolve: {
      data: function ($q, $http) {
        var deferred = $q.defer();
        $http({method: 'GET', url: 'http://ip.jsontest.com/'}).then(function(data) {
          deferred.resolve(data);
        });
        return deferred.promise;
      }
    }
 }

这是 Controller 部分

//`data` is injected from routeProvider after resolved
myApp.controller('MyCtrl', function($scope, $http, data) { 
  $scope.ip = data.ip
});

我认为 AngularJS 中的 promise 对于任何异步都是非常重要的概念。加工。每次回调时都需要使用此技术。