ui-router子ステートが親ステートデータにアクセスできない

Question

ui-routerの子ステートコンポーネントが親データを読み込む際に問題が発生しています。ログには$stateParamsが表示され、正しい情報が表示されます。このデータは、ui-sref属性にパラメータとして渡されます。その結果、正しい情報がユーザに表示されるはずですが、そうではありません。

ここには、アイテムがクリックされたアイテムによって記録されるアイテムが表示されます。

なぜ子状態patents.patentが親状態patentsからデータを読み出すために失敗していますか？

var app = angular.module('myApp', ['ui.router']); 

app.config(['$stateProvider', function($stateProvider) { 

    var states = [ 
     { 
      name: 'patents', 
      url: '/patents', 
      component: 'patents', 
      resolve: { 
       patents: function(patentsService) { 
        return patentsService.fetchAllPatents(); 
       } 
      } 
     }, 
     { 
      name: 'patents.patent', 
      url: '/{patentId}', 
      component: 'patent', 
      resolve: { 
       patent: function(patents, $stateParams) { 
        return patents.find(function(patent){ 
         return patent.id === $stateParams.patentId; 
        }) 
       } 
      } 
     } 
    ] 

    states.forEach(function(state) { 
     $stateProvider.state(state); 
    }); 

}]); 

---

app.service('patentsService', function($http) { 

    var service = { 

     fetchAllPatents: function() { 
     return $http.get('http://localhost:8080/Sprint002b/restpatent/', {cache: true}).then(function(resp){ 
        return resp.data 
      }); 

     } 
    }; 

    return service; 

}); 

成分

angular.module('myApp').component('patents', { 
    bindings: { patents: '<' }, 
    template: ' <div>' + 
        '<div>' + 
         '<table>' + 
          '<thead>' + 
           '<tr>' + 
            '<td>Application No. </td>' + 
            '<td>Client Ref</td>' + 
            '<td>Cost now</td>' + 
            '<td>Cost band end</td>' + 
            '<td>Cost next</td>' + 
            '<td>Renewal Date</td>' + 
           '</tr>' + 
          '</thead>' + 
          '<tbody>' + 
           '<tr ng-repeat="patent in $ctrl.patents">' + 
            '<td><a ui-sref="patents.patent({patentId: patent.id})" ng-bind="patent.applicationNumber"></a></td>' + 
            '<td ng-bind="patent.clientRef"></td>' + 
            '<td ng-bind="patent.currentRenewalCost">$</td>' + 
            '<td ng-bind="patent.costBandEndDate"></td>' + 
            '<td ng-bind="patent.renewalCostNextStage"></td>' + 
            '<td ng-bind="patent.renewalDueDate"></td>' + 
           '</tr>' + 
          '</tbody>' + 
         '</table>' + 
         '<div ui-view></div>' + 
        '</div>' + 
       '</div>' 
}); 

---

angular.module('myApp').component('patent', { 
    bindings: { patent: '<' }, 
    template: '<h3>A patent!</h3>' + 

      '<div><p>Name: {{$ctrl.patent.id}}</p></div>' + 
      '<div><p>Id: {{$ctrl.patent.applicationNumber}}</p></div>' + 
      '<div><p>Company: {{$ctrl.patent.clientRef}}</p></div>' + 

      '<button ui-sref="people">Close</button>' 
}); 

UPDATE

私は、子状態にデータを代入することができましたが、JSONオブジェクト内の最初の項目のみを代入しました。

設定ファイルのresolveプロパティに返されたデータを変更しました。データがロードされていますが、アイテムが選択されても変更されていません。

私は何をすべきかに関するアイデアはありますか？これは、すべてのそれはダウンに等しいのではなく、厳密な等価演算子を使用することにしたplunkr https://plnkr.co/edit/jbZgIg?p=preview

{ 
    name: 'patents.patent', 
    url: '/{patentId}', 
    component: 'patent', 
    resolve: { 
     patent: function(patents, $stateParams) { 
     return patents.find(function(patent){ 
     return $stateParams; // changed from patent.id === $stateParams.patentId 
     }) 
    } 
    } 
} 

Answer 1

で働いています。したがって、コードは次のようになります。