0

Angular 1.x コードを移行して、 $scope の使用を避け、コントローラーを構文として使用する、より新しい、より好ましい構文を使用しています。ただし、サービスからデータを取得する際に問題があります。

これが私の例です：

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

myApp.controller('MainCtrl', ['$http', '$location', 'userService',
  function($http, $location, userService) {

    this.name = 'John Doe';

    // this.userData = {

    // }

    this.userData = userService.async().then(function(d) {
      return d;
    });


    console.log(this.userData);


  }
]);

myApp.service('userService', function($http) {

  var userService = {
    async: function() {
      // $http returns a promise, which has a then function, which also returns a promise
      var promise = $http.get('https://jsonplaceholder.typicode.com/users').then(function(response) {
        // The then function here is an opportunity to modify the response
        // console.log(response);
        // The return value gets picked up by the then in the controller.
        return response.data;
      });
      // Return the promise to the controller
      return promise;
    }
  };
  return userService;

});
<body ng-app="myApp">
  <div id="ctrl-as-exmpl" ng-controller="MainCtrl as mainctrl">

    <h1>Phone Numbers for {{mainctrl.name}}</h1>

    <button ng-click="">newest</button>
    <p>{{mainctrl.userData}}</p>
    <ul>
      <li ng-repeat="users in mainctrl.userData">{{users.phone}} -- {{users.email}}</li>
    </ul>
  </div>
</body>

私が抱えているこの問題は、データが $$state の子であるため、userService.async から返されたデータが、データを取得するためにドリルダウンできないように見えるオブジェクトであることです。ビューで使用されているようです。

これが Controller As/$scope-less 構文でサービスを使用する適切な方法でない場合、適切な方法は何ですか?

実例はこちら: http://plnkr.co/edit/ejHReaAIvVzlSExL5Elw?p=preview

4

2 に答える 2

1

promise の重要な部分を見逃しています。promise から値を返すときに、この値に解決される新しい promise を返します。

promise から返されたデータをコントローラーのローカル変数に設定する現在の方法は次のとおりです。

myApp.controller('MainCtrl', ['$http', '$location', 'userService',
  function($http, $location, userService) {

    this.name = 'John Doe';

    userService.async().then(function(d) {
      this.userData = d;
    });
  }
]);

しかし、今では のスコープが原因で問題が発生しているため、コントローラーのスコープthisに「プレースホルダー」変数を使用するのが一般的です。this

myApp.controller('MainCtrl', ['$http', '$location', 'userService',
  function($http, $location, userService) {

    var $ctrl = this; // Use $ctrl instead of this when you want to address the controller instance

    $ctrl.name = 'John Doe';

    userService.async().then(function(d) {
      $ctrl.userData = d;
    });
  }
]);
于 2016-12-14T15:23:40.397 に答える
0 
this.userData = userService.async().then(function(d) {
  return d;
});

このコードthis.userDataでは、promise として実際に定義されています。返されるデータが必要な場合は、次のようにdパラメーターを使用する必要があります。.then function

userService.async().then(function(d){
    this.userData = d;
    //a console.log() here would determine if you are getting the data you want.  
});

編集 あなたのサービスで、あなたがすでに.data応答オブジェクトで使用していることに気づきました。

http.get()正直なところ、あなたへの私の最善のアドバイスは、次のようにサービス内の呼び出しから promise を返すことです。

myApp.service('userService', function($http) {
    var userService = {
        async: function() {
          return $http.get('https://jsonplaceholder.typicode.com/users');
        }
    };
    return userService;

});

そして、次のようなものを使用して、応答データをキャプチャして利用できます。

userService.async().then(function(response){
    this.userData = response.data;
);

これは解決策の少しきれいかもしれません

于 2016-12-14T15:00:29.967 に答える