각도 UI 라우터 : 하위 상태 컨트롤러의 기능 호출

Question

각도 ui-router로 작업 해 왔고 하나의 문제가 계속 발생합니다. 저는 여러분 중 일부가 깨끗하고 해커가없는 방식으로이 문제를 해결하는 방법에 대해 조언 해 줄 수 있기를 바랍니다.

내가 연락처 목록과 측면 탐색이 왼쪽에서 :

다음과 같은 시나리오를 생각해보십시오. 연락처를 클릭하면 선택한 연락처의 세부 정보가 app.contacts.details 상태로 표시됩니다. 연락처를 선택하자마자 일부 컨트롤이 헤더에 나타납니다. "편집"및 "삭제"(실제로 이러한 예를 고려해보십시오. 실제로는 이러한 작업이 더 복잡합니다).

이러한 버튼은 detailStateController의 함수를 호출하는 것이 이상적입니다. detailStateController.delete() 현재 선택한 연락처를 삭제하거나 detailStateController.edit()을 클릭하여 선택한 연락처를 편집합니다 (아이디어를 얻음). 물론 편집 및 삭제 버튼이 app.contacts.details 상태보기 안에 있지 않으므로 detailStateController이 해당 범위에 없기 때문에 물론 작동하지 않습니다.

이벤트를 브로드 캐스트하여 해결할 수 있지만 가능한 경우 이벤트를 사용하지 않는 것이 좋습니다.

어떻게 해결할 수 있습니까?

모든 조언을 크게 듣습니다.

Answer 1

저는이 스타일에서 벗어나 컨트롤러의 모든 항목을 목록과 함께 처리했습니다. 세부 컨트롤러에서 항목을 삭제하거나 상위 컨트롤러에 표시된 필드를 편집하면 결국 목록 컨트롤러를 업데이트해야합니다. 내가 지금하고있는 것과 같은 방식으로하고있을 때, 한 컨트롤러에있는 세부 사항과 다른 컨트롤러에있는 세부 사항으로 인해 많은 여분의 농구를 뛰어 넘어야하는 것처럼 보였습니다. 나는 일반적으로 컨트롤러의 배열이고 전체 레코드가 표시되는 현재 행 속성 인 목록 속성을 가지고 있습니다. 그런 다음 ng-if를 사용하여 현재 행을 확인하고 적절하게 표시합니다. 행을 클릭하면 $ location.search를 사용하여 URL을 업데이트하고 시동시 딥 링크를 위해 $ location search를 확인합니다. 결과적으로 조금 더 큰 단일 컨트롤러가되지만, 결합 된 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.detail 목록
들어 - -
• app.contacts.list 상세히/목록보기위한 툴바를 포함 상세히

Controller의 (마다 상태) :

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 
}