Angular UI路由器：調用子狀態控制器的功能

我一直在使用角度ui路由器，一個問題不斷出現。我希望你們中的一些人可以給我建議如何以一種乾淨而不危險的方式解決這個問題。Angular UI路由器：調用子狀態控制器的功能

考慮以下情形：

在左邊我有一個聯繫人列表側面導航。一旦我點擊一個聯繫人，所選聯繫人的詳細信息將顯示在app.contacts.details狀態中。只要我選擇了一個聯繫人，一些控件會出現在標題中，例如。「編輯」和「刪除」（將它們視爲一個例子，實際上這些操作更復雜）。

理想情況下，這些按鈕只會調用detailStateController的一個函數，例如。 detailStateController.delete()要刪除當前選定的聯繫人或detailStateController.edit()以編輯選定的聯繫人（您會明白）。當然，這不起作用，因爲編輯和刪除按鈕不在app.contacts.details狀態的視圖內，因此detailStateController不在其範圍內。

我知道這可以通過廣播事件來解決，但我想盡量避免使用事件。

你會如何解決這個問題？

任何意見非常感謝。

來源

2016-05-31 omnibrain

我已經擺脫了這種風格，只需處理控制器與列表中的所有內容。如果您從詳細信息控制器中刪除項目或編輯父控制器中顯示的字段，您最終必須更新列表控制器。當我按照你現在這樣做的方式時，似乎我不得不跳過由於一個控制器中的細節和另一個控制器中的細節引起的許多額外的箍。我通常只有一個list屬性，它是我的控制器上的一個數組，當前行屬性是顯示的完整記錄。然後我使用ng-if來檢查當前行並適當地顯示。當單擊一行時，我使用$ location.search更新網址，並在啓動時檢查$ location搜索以進行深度鏈接。這會導致單個控制器的體積稍大，但比2個控制器的組合還要小。如果我只處理幾個字段，那麼我會在列表中包含所有字段。如果有大量數據，當列表中的當前項目被更改爲獲取currentRow的數據並更新currentRow時，我會進行服務調用。

來源

2016-05-31 20:07:35

工廠是單身人士，可用於跨控制器共享數據和功能。你可以寫這樣的：

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 
     }); 
    } 
}]);

來源

2016-05-31 20:07:43 Kyle

我個人喜歡在這樣的情況下創建以下結構。

路由器規定：

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 
}

來源

2016-05-31 20:53:14

Angular UI路由器：調用子狀態控制器的功能

回答

相關問題