從狀態解析函數訪問返回的數據

我正在使用AngularJS模塊ui-router並使用resolve屬性來獲取項目的ID。從狀態解析函數訪問返回的數據

在一個單獨的文件中，我有組件patent狀態patents.patent，它具有返回id的功能。我需要從控制器訪問返回的id，以便我可以收集與所選項目相關的正確數據。

如何從控制器訪問函數返回值resolve？

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

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

    $stateProvider 
    .state('patents', { 
     url: '/patents', 
     component: 'patents', 
     resolve: { 
      patents: function(patentsService) { 
       return patentsService.fetchAllPatents(); 
      }, 
      graphs: function(patentsService) { 
       return patentsService.fetchGraphData(); 
      } 

     }  
    }) 
    .state('patents.patent', { 
     url: '/{patentId}', 
     component: 'patent', 
     resolve: { 
      patent: function(patents, $stateParams) { 
       return patents.find(function(patent){ 
        return patent.id == $stateParams.patentId; 
       }) 
      }, 
      graph: function(graphs, $stateParams) { 
       return graphs.dataset.find(function(graph){ 
        return graph.id == $stateParams.patentId; //NEED THIS VALUE 
       }) 
      } 
     } 
    }) 

}]);

angular.module('myApp').component('patent', { 
    bindings: { 
     patent: '=' , 
    }, 
    templateUrl: '../templates/patents/list/patent-item.htm', 
    controller: function() { 
     var vm = this; 

     //WHERE I NEED TO ACCESS THE RETURNED VALUE 

    } 
});

來源

2017-07-06 Patrick McDermott

，你可以注入分解成像控制器控制器功能：功能（專利，圖表） – Vivz

這就是我想，但它有錯誤'錯誤出現：$注射器：unpr 未知的提供者「 –

您可以使用指令而不是組件，但結構看起來相同，但是Idk您試圖使用組件 – Vivz

要簡單地訪問您的解決數據你將它們定義爲綁定到您的控制器。就像你已經完成了patent。然後你通過你的vm變量（或這個）訪問它們。

angular.module('myApp').component('patent', { 
    bindings: { 
     patent: '<' , 
     graph: '<' 
    }, 
    templateUrl: '../templates/patents/list/patent-item.htm', 
    controller: function() { 
     var vm = this; 

     vm.$onChanges = function(changeObj){ 
      if(changeObj.patent){ 
       console.log('I am your patent', vm.patent); 
      } 
      if(changeObj.patent){ 
       console.log('I am your graph', vm.graph); 
      } 
     } 
    } 
});

由於@rrd建議，你應該警惕你的控制器對微小，但不僅如此，你也應該保護你的決心功能從縮小。

像這樣：

resolve: { 
    patents: ['patentsService', function(patentsService) { 
     return patentsService.fetchAllPatents(); 
    }], 
    graphs: ['patentsService', function(patentsService) { 
     return patentsService.fetchGraphData(); 
    }] 
}

來源

2017-07-06 11:10:34

非常感謝您的詳細解釋和示例，但第一種方法返回未定義，第二種返回上述相同的錯誤消息。我一直在閱讀Vivz發佈的內容，http://dontpanic.42.nl/2016/07/using-ui-router-as-component-router.html。似乎正在取得進展，但錯誤正在返回 –

嘗試在解析函數中添加一個'console.log（）'來檢查它們是否實際返回任何值 - 或者它們甚至被調用。這個問題似乎並不是控制器本身。 –

是的。返回專利和圖形解析的正確數據 –

由於Vivz指出，注射到控制器應該工作，但是你需要確保防範微小的問題：

angular.module('myApp').component('patent', { 
    bindings: { 
    patent: '=' , 
    }, 
    templateUrl: '../templates/patents/list/patent-item.htm', 
    controller: ['graph', function(graph) { 
    var vm = this; 

    //WHERE I NEED TO ACCESS THE RETURNED VALUE 

    }] 
});

來源

2017-07-06 10:13:28 rrd

我瞭解安全防範最小化問題，但仍然出現錯誤：「錯誤：$ injector：unprUnknown Provider」顯示：/ –

我正在使用正確的綁定符號嗎？ –

從狀態解析函數訪問返回的數據

回答

相關問題