defer.promiseが期待通りに動作しない

Question

私は3日間Angularをやり始めました。私は約束のコンセプトの周りを頭で覆うことができません。

私は2つのコントローラ間でJSONデータを共有するためのファクトリを作成しようとしています。データは、シリアライズされたSQLデータテーブルを表します。

工場は、第1のコントローラは、

app.controller("TableController", function ($scope, Tableau) { 
    $scope.elements = Tableau.getTable(2); // get the first ten rows with row id >= n x 10 (in this case 2 x 10) 
}); 

HTMLテーブルとしてデータを表示する必要があり、ここでのNGディレクティブ

<tr ng-repeat="t in elements.myarray track by $index"> 
    <td ng-repeat="(k,v) in t track by $index"> 
     <div ng-if="k.indexOf('#')===0"> 
      <span class="label label-default" ng-repeat="vv in v.split(';')">{{vv}}</span><br /> 
     </div> 
     <div ng-if="k.indexOf('§')===0"> 
      <a href="{{v}}">Lien</a> 
     </div> 
     <div ng-if="k.indexOf('#')!=0 && k.indexOf('§')!=0"> 
      {{v}} 
     </div> 
    </td> 
</tr> 

とHTMLコードがあります$ HTTP

var app = angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 

app.factory('Tableau', function ($http, $q) { 
    var obj = {}; 
    obj.getTable = function (page) { 
      var temp = {}; 
      var defer = $q.defer(); 
      $http.get('api/Table/' + page).then(function (resolve) { 
       defer.resolve(resolve.data); 
      }); 
      return defer.promise; 
    } 
    return obj; 
}); 

を使用してデータをフェッチ

コントローラーから$ httpを呼び出す際に問題はありませんが、コードを移動したとき$ factory.elementsには、期待されるJSONオブジェクトの代わりに約束オブジェクトが含まれています。

私は工場からオブジェクトを返す返す前に完了するために、（ui-bootstrapを使用して）

1. どのように私は待つことができます$ HTTPをテーブルの改ページを作成し前記第二のコントローラを実装していませんでしたか？

2. これができない場合は、サーバーから取得したデータを1回の移動でどのように共有できますか？

ありがとうございます。

Answer 1

結果を使用する前に、約束が完了するまで待つ必要があります。それは.then()を使用することを意味：あなたはまた、明示的な約束建設アンチパターンに餌食に落ちたんだ

app.controller("TableController", function ($scope, Tableau) { 
    Tableau.getTable(2) 
     .then(function (result) { 
      $scope.elements = result; 
     }); 
}); 

。あなたの工場のための

よりシンプルな実装：あなたのコントローラで

app.factory('Tableau', function ($http, $q) { 
    var obj = {}; 

    obj.getTable = function (page) { 
     return $http.get('api/Table/' + page) 
      .then(function (result) { 
       return result.data; 
      }); 
    }; 

    return obj; 
}); 

Answer 2

：

Tableau.getTable(2) 
     .then((data) => { 
     $scope.elements = data 
    })