Question

我正在使用Angular 1.5 Component。我无法弄清楚如何通过Resolve获取数据。

你可以请一些亮点吗？

Plunker： https://plnkr.co/edit/2wv4YWn8YQvow6FDcGV0

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="https://code.angularjs.org/1.5.7/angular.js"></script>
    <script src="https://code.angularjs.org/1.5.7/angular-route.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <ng-view></ng-view>
  </body>

</html>

app.js

(function () {

    angular
      .module("app", ['ngRoute'])
      .config(function($routeProvider){
        $routeProvider
          .when("/home", {
              template: `<main 
                promise-followers="$resolve.promiseFollowers"></main>`,
              resolve: {promiseFollowers: function ($http) {
                    $http.get("https://api.github.com/users/octocat/followers")
                      .then(function(result) { 
                        return result.data;
                      }, function(result) { 
                        console.log(result);
                      });
                }
              },
          })
          .otherwise({ redirectTo: "/home" } );
      })
      .component("main", {
        template: `<h3>Demo Angular 1.5 Resolver</h3>
        <p>Promise Data from Controller : 
          <select ng-model="$ctrl.selected" 
            ng-options="option.id as option.login for option in $ctrl.followers"></select>
        </p>

        <p>Promise Data from Resolve : 
          <select ng-model="$ctrl.selected" 
            ng-options="option.id as option.login for option in $ctrl.promiseFollowers"></select>
          <span class="label label-danger">Not Working</span>
        </p>        

        <h4>Regular Selector Selected: {{$ctrl.selected}}</h4>`, 

        controller: function($http){

          var self = this;

          // This is just testing to to make sure api is working.
          $http.get("https://api.github.com/users/octocat/followers")
            .then(function(result) { 
              self.followers = result.data;
            }, function(result) { 
              console.log(result);
            });

          self.$onInit = function () {
            console.log(self.promiseFollowers);
          }    
        }
      });

})();

Answer 1

您忘了从promiseFollowers承诺中退回承诺。

promiseFollowers: function ($http) {
     return $http.get(...){
     }
}

在您还需要定义bindings选项以检索从resolve

传递的值之后

bindings: {
   promiseFollowers: '='
},

Demo Plunkr

Answer 2

https://stackoverflow.com/a/18019915/6524138如果上述解决方案不起作用，请参考这个应该有用。

Jist：“向控制器注入解析”应解决您的问题。

如何等待Angular 1.5 Component中的UI Router Resolve的承诺

2 个答案: