角度UIルータ：子状態のコントローラの機能を呼び出す

Question

私は角度ui-routerで作業していましたが、1つの問題が引き続き発生します。私はあなたの何人かが、この問題をきれいでハッピーではない方法で解決する方法をアドバイスしてくれることを願っています。私は連絡先のリストとサイドナビゲーションを持って左側に

：

次のシナリオを検討してください。連絡先をクリックすると、選択した連絡先の詳細がapp.contacts.detailsの状態で表示されます。連絡先を選択するとすぐに、ヘッダーにいくつかのコントロールが表示されます。 "編集"と "削除"（実際にはこれらの操作はもっと複雑です）を考慮してください。

理想的には、これらのボタンはdetailStateControllerの関数を呼び出します。 detailStateController.delete()現在選択されている連絡先を削除するか、detailStateController.edit()をクリックして選択した連絡先を編集します。もちろん、編集ボタンと削除ボタンがapp.contacts.details状態のビューの内側にないため、detailStateControllerがそのスコープに含まれていないため、これは機能しません。

これはイベントをブロードキャストすることで解決できますが、できる限りイベントを使用しないようにしたいと思います。

どうすれば解決できますか？

アドバイスをいただければ幸いです。

Answer 1

私はこのスタイルから離れて、リストのコントローラからすべてを扱いました。詳細コントローラーから項目を削除したり、親コントローラーに表示されている項目を編集すると、リストコントローラーを更新する必要があります。私はあなたが今やっているようにやっていましたが、コントローラの詳細とリストが別のコントローラの中にあることに起因して、たくさんの余分なジャンプが発生したように思えました。私は一般的にコントローラの配列であるリストプロパティと、表示されている完全なレコードである現在の行プロパティを持っています。次に、ng-ifを使って現在の行をチェックし、適切に表示します。行をクリックすると、$ location.searchを使用してURLを更新し、起動時にディープリンクの$ location searchをチェックします。これにより、1つのコントローラが少し大きくなりますが、2つのコントローラを組み合わせた場合よりも小さくなります。私がいくつかのフィールドだけを扱っているなら、私はリストのすべてのフィールドを含めます。多くのデータがある場合、リストの現在の項目が変更されてcurrentRowのデータが取得され、currentRowを更新するとサービスコールが行われます。

Answer 2

ファクトリはシングルトンであり、コントローラ間でデータや機能を共有するために使用できます。お使いのコントローラで、次に

app.factory("DataService", ["$http", function($http){ 
    var contacts = []; 

    return { 
     //sharing functions 
     postItem: function(url, item) { 
      return $http({ 
       url: url, 
       method: 'POST', 
       data: item 
      }); 
     }, 
     putItem: function(url, item) { 
      return $http({ 
       url: url, 
       method: 'PUT', 
       data: item 
      }); 
     }, 
     deleteItem: function(url, item) { 
      return $http({ 
       url: url, 
       data: item, 
       method: 'DELETE' 
      }); 
     }, 
     setContacts = function(contacts) { 
      contacts = contacts; 
     }, 
     addContacts = function(contact) { 
      contacts.push(contact); 
     }, 
     deleteContact = function(contact) { 
      var idx = this.contacts.indexOf(contact); 
      contacts.splice(idx, 1); 
     } 
    }; 
}]); 

を：あなたはこのようにそれを書くことができ

app.controller("ContactDetailsCtrl", ["$scope", "DataService", function($scope, DataService){ 
    $scope.deleteContact = function() { 
     DataService.deleteItem('path/to/delete', { contactId: 123 }).then(function(response) { 
      //remove from client-side array once it's removed form db 
      DataService.deleteContact(contact); 
     }).catch(function(response){ 
      //an error occurred 
     }); 
    } 
}]); 

Answer 3

私は個人的にこのような場合には、次の構造を作成したいです。

ルータの状態：

• app.contacts.index -
• ​​リスト
について - -
• app.contacts.list詳細/リストビューのツールバーを収容するための詳細

コントローラについて（毎状態resp）：

function IndexCtrl($scope) 
{ 
    $scope.contact = {}; // For containing the selected contact 
    $scope.contacts = []; // List of contacts also on the parent view 

    // Define Detail View functions here 
    $scope.edit = Edit; 
    $scope.delete = Delete; 

    // Perform operations on $scope.contact/$scope.contacts 
    function Edit() {} 
    function Delete() {} 
} 

function DetailCtrl($scope) 
{ 
    $scope.contact = $scope.$parent.contact = $scope.$parent.contacts[id]; // This way we work with the parent contact defined in IndexCtrl 
} 

function ListCtrl($scope, Contacts) 
{ 
    $scope.contacts = $scope.parent.contacts = Contacts.list(); // Contacts Service to retrieve the contact list 
}