2

友達..

Angular でルーティングがどのように機能するかを理解するために、単純なアプリケーションを作成しました。このアプリケーションには次の 2 つのページしかありません。 1. 最初のページには、employee テーブルのすべての行が表示されます。特定の行をクリックすると、2 ページ目にその従業員の詳細が記載されたフォームが表示されます。

最初のページに表示されるリストは、次のコードを使用します。

<table>
   <tr ng-repeat="employee in employees">
       <td>{{employee.firstname}} - {{employee. address}}</td>           
       <td><span ng-click="getSingleEmployeeDetails(employee.id)">Edit</a></td>
   </tr>
</table>

これらのページの両方に同じコントローラーを使用しています。このコントローラーは次のようになります。

function EmployeeCtrl($scope,$http,Employee,$location,$routeParams) {
    // Get all employee details 
    var data;
    Employee.query().then(function(_data) {
      $scope.employees = _data.data;            
    }); 

    // Get Single Employee Details
    $scope.getSingleEmployeeDetails = function(id) {
      $scope.employee = scope.employees[id];
      $location.path('/editemployee/' + id);
    }   
}

ただし、私が直面している問題は
、何らかの理由でコードが /editemployee/1 にルーティングされると、 $scope.employees の値が失われることです。

つまり、フォームに従業員の詳細が入力されることはありません。

ここで何が間違っていますか？

4

2 に答える 2

0

これはスコーピングと関係があります。インスタンス化されると、従業員は EmployeeCtrl に読み込まれます。getSingleEmployeeDetails() でルーティング イベントを実行すると、別のコントローラーが別の $scope で読み込まれます。EmployeeCtrl 内の $scope とは別の $scope。これを回避する簡単な方法の 1 つは、新しいコントローラーにルーティングせずに、すべての従業員と 1 人の従業員をロード/表示する機能を EmployeeCtrl に処理させることです。ここでの長所は、情報の共有が容易になることです。また、ユーザーが 1 人の従業員をクリックしたときに、1 人の従業員の情報を再読み込みする必要がありません。その情報をより簡単に共有できるためです。短所は、単一の従業員の選択間を移動するための戻るボタンのナビゲーションが得られないことです。

もう 1 つのオプションは、SingleEmployeeCtrl がナビゲートするときに情報をリロードできるようにすることです。長所は、戻るボタンへのアクセスを再度取得できることですが、短所は、情報を 2 回ロードすることです (完全なリストをロードするために 1 回、従業員情報を再度ロードするために 2 回)。これにより、ユーザーは単一の従業員レコードをブックマークすることもできますが、もう誰がブックマークするのでしょうか?

于 2013-07-15T16:00:53.580 に答える
0

他の人は、ルートを変更すると新しいコントローラー (および $scope) が作成されるという事実をすでに説明しています。また、promise が解決されると、$scope.employees が非同期的に設定されることにも注意してください。起こりそうなことは、promise が解決される前に getSingleEmployeeDetails() が呼び出されているため、employees配列が空になっていることです。

この問題を解決するには、別のアーキテクチャを提案します。

2 つのビュー/ページがあります。通常、Angular の各ビューには独自のコントローラーがあります。モデル/データは通常、サービスに格納され、それらのモデル/データを取得して操作するための API は、サービスによって利用可能/公開されます。コントローラーはすべてを結び付けるだけです。必要なサービスを注入し、関連付けられたビューが必要とするモデル/データのみを参照します。

したがって、アプリは単純ですが、上記のアプローチをお勧めします。1 つのサービス (従業員オブジェクトを格納する)、2 つのコントローラー、2 つのビューです。特に、query()呼び出しをサービスに入れ (サービスの作成時に 1 回呼び出されるように)、データをサービスに保存します。サービス API は、最終的に必要なデータ (従業員のリスト、または 1 つのみ) を含む promise を返す関数/メソッドを定義する必要があります。コントローラーは、これらのメソッドを使用して、目的のデータへの参照を取得する必要があります。

サービスは非同期性を公開する必要がありますか?も参照してください。サービスにデータを格納する方法の例については、 を参照してください。

于 2013-07-15T18:16:58.637 に答える