状態パラメーターのコントローラーにアクセスするのに問題があります。次のビューにリンクするために正しい状態を使用しています。
<td><a ui-sref="orders({customerId: cust.id})">View Orders</a></td>
私の設定ファイルでは、名前とルート パラメータの状態を参照しています。とりあえず解決オブジェクトをコメントアウトしました。私の目標は、コントローラーに入り、正しいデータを渡すことです。 controllerAs を使用していることに注意してください
私の最初の考えは({customerId: ctrl.cust.id }) でしたが、それは URL ルートを変更しませんでした。URL は URL 名に一致するように変更されていますが、コントローラーに接続されておらず、ビューが表示されません。
(function() {
'use strict';
angular
.module('app.orders')
.config(config);
function config($stateProvider) {
$stateProvider
.state('orders',{
// params: {customerid: null},
url:'/customers:customerId',
templateUrl: './components/orders/orders.html',
controller: 'OrdersController',
controllerAs: 'ctrl',
resolve: {
customerFactory: 'customerFactory',
customerInfo: function( customerFactory, $stateParams) {
return customerFactory.getCustomers($stateParams.id);
}
}
************** 私の主な問題は解決です。これは、次のコントローラーに入るのを妨げています。****************
resolve: {
customerId:[ '$stateParams','customerFactory', function( $stateParams, customerFactory) {
return customerFactory.getCustomers($stateParams.id);
}]
}
})
};
})();
今のところ、私のコントローラーは非常に小さいです。私はそれに接続したいだけです。ネットワーク タブを確認したところ、ファイルの GETが表示されました。
(function() {
// 'use strict';
angular
.module('app.orders')
.controller('OrdersController', OrdersController);
function OrdersController($stateParams) {
console.log('in');
var vm = this;
vm.title = "Customer Orders";
vm.customer = null;
}
}());
メインの JavaScript ファイルでモジュールを参照しました。
(function () {
'use strict';
angular.module('app', ['app.services',
'app.customers',
'app.orders','ui.router']);
})();
解決をコメントアウトすると、コントローラーにアクセスできます。だから私は問題が解決されていることを知っています。これが私のサービスです。$http リクエストを使用して.thenを使用して Json ファイルにリクエストを送信しています
更新 これはリファクタリングされたサービス コールで、毎回コンソールに正しい顧客が表示されます。
(function() {
angular
.module('app.services',[])
.constant('_', window._)
.factory('customersFactory', customersFactory);
function customersFactory($http, $log) {
return {
getCustomers: getCustomers,
getCustomer: getCustomer
};
function getCustomers(){
return $http.get('./Services/customers.json',{catch: true})
.then(getCustomerListComplete)
.catch(getCustomerListFailed);
function getCustomerListComplete(response) {
console.log('response.data',response.data);
return response.data;
}
function getCustomerListFailed(error) {
console.log('error', error);
}
}
function getCustomer(id) {
var url = './Services/customers.json';
return $http.get(url, {
catch: true
})
.then(function(response) {
console.log('promise id',id);
var data = response.data;
for(var i =0, len=data.length;i<len;i++) {
console.log('data[i].id',data[i].id);
if(data[i].id === parseInt(id)) {
console.log('data[i]', data[i]);
return data[i];
}
}
})
}
}
}());