Javascript AngularJS ui路由器使用$state.params和查询导航状态
我有一个具有多个状态的应用程序,每个状态都有嵌套视图。一个状态有一个条件模板URL,并且基于Javascript AngularJS ui路由器使用$state.params和查询导航状态,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我有一个具有多个状态的应用程序,每个状态都有嵌套视图。一个状态有一个条件模板URL,并且基于$state.param将显示特定的HTML/JS。我想在状态的URL上设置一个查询,这样我就可以在单击列表项时知道正在查看哪个列表项。我不知道如何设置url查询并转换到所需状态的视图 我国: .state('index', { url: '/', views: { '@' : { templateUrl: 'vie
$state.param
将显示特定的HTML/JS。我想在状态的URL上设置一个查询,这样我就可以在单击列表项时知道正在查看哪个列表项。我不知道如何设置url查询并转换到所需状态的视图
我国:
.state('index', {
url: '/',
views: {
'@' : {
templateUrl: 'views/layout.html'
},
'top@index' : {
templateUrl: 'views/top.html',
controller: function($scope, $state) {
$scope.logOut = function() {
$state.go('login');
};
}
},
'left@index' : { templateUrl: 'views/left.html' },
'main@index' : { templateUrl: 'views/main.html' }
}
})
.state('index.list', {
url: 'list?item',
templateUrl: 'views/lists/list.html',
controller: 'ListCtrl'
})
.state('index.list.details', {
url: '/',
params: {
detail: 'overview'
},
controller: ctrl,
views: {
'details@index' : {
templateUrl: function($stateParams) {
if($stateParams.detail === 'status' ) {
ctrl = 'StatusCtrl';
return 'views/details/status.html';
} else if ($stateParams.detail === 'overview') {
ctrl = 'OverviewCtrl';
return 'views/details/overview.html';
}
}
}
},
})
在我的index.list
控制器中,这里有列表,单击并填充详细信息视图
HTML&Js:
<div class="channel" ng-repeat="item in items" ng-click="viewListDetails(item)">
$scope.viewListDetails = function(item) {
$location.search('item', item.id);
$state.go('index.list.details', {detail: 'status'}, {reload: true})
};
$scope.viewListDetails=函数(项){
$location.search('item',item.id);
$state.go('index.list.details',{detail:'status'},{reload:true})
};
上面的我的JS运行函数,但是它什么也不做!它不会将查询或转换设置为该状态所需的视图
感谢您的帮助
index.deviceList.detail
不是已定义的状态。您可能打算编写index.list.details
哎呀,这是我在复制粘贴到堆栈溢出中的输入错误,感谢您指出这一点。您应该调试代码,并查看单击时templateUrl
返回的内容,或者如果函数被调用,则返回事件。还有那些ctrl='OverviewCtrl'代码>看起来不正确,因为未定义ctrl
。控制台中有错误吗?@koox00没有,根本没有错误!!将其放入application.run=>$rootScope.on(“$stateChangeError”,console.log.bind(console))代码>要记录转换错误,可能会以静默方式失败。