我在获取状态参数的 Controller 时遇到一些问题。我正在使用正确的状态链接到下一个 View 。
<td><a ui-sref="orders({customerId: cust.id})">View Orders</a></td>
在我的配置文件中,我引用了名称和路由参数的状态。我暂时注释掉了解析对象。我的目标是进入 Controller 然后传递正确的数据。 请注意,我正在使用controllerAs
我最初的想法是 ({customerId: ctrl.cust.id }) 但这并没有改变 url 路由。 网址正在更改以匹配网址名称,但没有连接到 Controller ,也没有给我 View 。
(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);
}
}
**************** 我的主要问题是解决。这阻止我进入下一个 Controller 。 ******************
resolve: {
customerId:[ '$stateParams','customerFactory', function( $stateParams, customerFactory) {
return customerFactory.getCustomers($stateParams.id);
}]
}
})
};
})();
目前我的 Controller 非常小。我只想连接到它。我已检查我的网络选项卡并查看 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']);
})();
当我注释掉解析时,我可以访问 Controller 。所以我知道问题出在解决上。这是我的服务。我正在使用 $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];
}
}
})
}
}
}());
最佳答案
有一个working example with your code
很难猜测出了什么问题。基于我在这里给您的建议 Have a expression error in ui-sref ...您的代码似乎完全有效。
我将您的内容放入此 app.orders.js
文件中(唯一的更改是 templateUrl 路径,仅用于 plunker 目的):
angular
.module('app.orders', ['ui.router'])
'use strict';
angular
.module('app.orders')
.config(['$stateProvider', config]);
//config.$inject = ['$stateProvider'];
function config($stateProvider) {
$stateProvider
.state('orders',{
// params: {customerid: null},
url:'/customers:customerId',
//templateUrl: './components/orders/orders.html',
templateUrl: 'components/orders/orders.html',
controller: 'OrdersController',
controllerAs: 'ctrl'
// resolve: {
// customerId:[ '$stateParams','customerFactory', function( $stateParams, customerFactory) {
// return customerFactory.getCustomers($stateParams.id);
// }]
// }
})
};
// 'use strict';
angular
.module('app.orders')
.controller('OrdersController', OrdersController);
OrdersController.$inject = ['$stateParams'];
function OrdersController($stateParams) {
console.log('in');
var vm = this;
vm.title = "Customer Orders " + $stateParams.customerId;
vm.customer = null;
}
这是工作模板components/orders/orders.html
:
<div >
<h3>current state name: <var>{{$state.current.name}}</var></h3>
<h5>title</h5>
<pre>{{ctrl.title}}</pre>
...
当我这样调用它时:
<li ng-repeat="cust in [{id:1}, {id:2}]"
><a ui-sref="orders({customerId: cust.id})">View Orders - cust ID == {{cust.id}}</a>
</li>
关于javascript - ui-sref 被阻止访问 Controller 数据或 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32466390/