获取“无法解决……从状态……"；使用嵌套路由 angularjs 时出错
[英] Getting "could not resolve ... from state ..." error when using nested routes angularjs
本文介绍了获取“无法解决……从状态……"；使用嵌套路由 angularjs 时出错的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 angularjs 的新手，我想为我的应用程序使用嵌套的 ui-routes.一些代码片段...
profile.html
<div class="dl-horizontal" id="信息"><div class="col-md-8 col-md-offset-2"><!-- 编辑按钮--><div style="margin-bottom: 15px"><div class="button" style="margin-top:5px" style="float:left"><button type="button" class="btn btn-primary" ui-sref="edit_profile" ng-click="populate()"><span class="glyphicon glyphicon-pencil"></跨度>编辑个人资料
client_UI.js
//路由对象var route = angular.module('route', ["ui.router"])//配置路由route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {//发送到个人资料页面$urlRouterProvider.otherwise("/profile");$stateProvider//个人信息路由.state('个人资料', {网址:/个人资料"，templateUrl : "profile_area/profile.html" ,控制器:'配置文件控制器'})
edit.html
<script src="Scripts/angular-ui-bootstrap.js"></script><!-- 标题--><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h2 class="modal-title">编辑配置文件
<div class="modal-body"><form role="form" id="myForm"><!-- 名称--><div class="panel panel-default"><div class="panel-body"><div class="form-group"><label for="name">Name </label><input placeholder="{{infos.Name}}" id="name" type="text" ng-model="name">
profile.js
//路由对象var route = angular.module('route', ["ui.router"])//配置路由route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {$stateProvider//编辑页面的路由.state('edit_profile', {url: "/edit_profile",templateURL : "edit/edit_profile.html" ,控制器:'编辑控制器'})});route.controller('editController' ["$scope", "$resource", function($scope, $resource) {//资源对象var profile = $resource($scope.apicall + "/api/userprofile/", {Userid:$scope.userid}, {'post':{method: 'POST'}});var edit = new profile();
这是视图 (index.html) ...
<div class="container" id="route" style="width:90%"><div ui-view></div>
<!-- 页脚--><页脚></页脚>
我从控制台收到一条错误消息，提示无法从状态 'profile' 解析'edit_profile'"，并且 edit.html 应该是 profile.html 的子状态.我在 angularjs 中使用 ui-routing.我希望能够单击 profile.html 中的一个按钮，该按钮将状态更改为 edit_profile 并显示在 index.html 的 ui-view 中.有关如何解决此问题的任何建议，或者是否有其他简单的方法可以做到这一点?
解决方案
在这种情况下，angular 告诉我们:我根本找不到状态 edit_profile.我在这里创建了示例
原因其实是我们真的要加载2个js文件:
两者必须加载，但两者不能声明同一个模块:
var route = angular.module('route', ["ui.router"])
其中之一必须不同或只是不声明但使用模块:
//client_UI.jsvar route = angular.module('client_ui', ["ui.router"])//配置文件.jsvar route = angular.module('route', ["ui.router", "client_ui"])
或者两者都可以在同一个模块中:
//client_UI.jsvar route = angular.module('route', ["ui.router"])//配置文件.jsvar route = angular.module('route')
检查所有工作这里
I'm new to angularjs and I want to use nested ui-routes for my application. Some code snippets ...
profile.html
<div class="row">
<div class="dl-horizontal" id="information">
<div class="col-md-8 col-md-offset-2">
<!-- edit button -->
<div style="margin-bottom: 15px">
<div class="button" style="margin-top:5px" style="float:left">
<button type="button" class="btn btn-primary" ui-sref="edit_profile" ng-click="populate()"><span class="glyphicon glyphicon-pencil"></span> Edit Profile</button>
</div>
</div>
client_UI.js
//object for routing
var route = angular.module('route', ["ui.router"])
// configure the routing
route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
// send to profile page
$urlRouterProvider.otherwise("/profile");
$stateProvider
// route for personal info
.state('profile', {
url: "/profile",
templateUrl : "profile_area/profile.html" ,
controller : 'profileController'
})
edit.html
<script src="Scripts/angular-ui-bootstrap.js"></script>
<!-- title -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title"> Editing Profile</h2>
</div>
<div class="modal-body">
<form role="form" id="myForm">
<!-- Name -->
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label for="name">Name </label>
<input placeholder="{{infos.Name}}" id="name" type="text" ng-model="name">
</div>
profile.js
//object for routing
var route = angular.module('route', ["ui.router"])
// configure the routing
route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
//route for edit page
.state('edit_profile', {
url: "/edit_profile",
templateURL : "edit/edit_profile.html" ,
controller : 'editController'
})
});
route.controller('editController' ["$scope", "$resource", function($scope, $resource) {
// resource objects
var profile = $resource($scope.apicall + "/api/userprofile/", {Userid:$scope.userid}, {'post':{method: 'POST'}});
var edit = new profile();
and this is the view (index.html) ...
<!-- route veiw -->
<div class="container" id="route" style="width:90%">
<div ui-view></div>
</div>
<!-- Footer -->
<footer></footer>
I'm getting an error from the console that says, Could not resolve "'edit_profile' from state 'profile'" and edit.html is supposed to be the child state of profile.html. I'm using ui-routing in angularjs. I want to be able to click a button in the profile.html that will change the state to edit_profile and will be displayed in the ui-view in index.html. Any suggestions on how to fix this or is there another easy way to do this?
解决方案
In this case, angular is informing us: I simply cannot find the state edit_profile. I created working example here
The reason is in fact, that we really have to load 2 js files:
both of them must be loaded but both of them cannot declare the same module:
var route = angular.module('route', ["ui.router"])
one of them must be different or just not declare but consume the module:
// client_UI.js
var route = angular.module('client_ui', ["ui.router"])
// profile.js
var route = angular.module('route', ["ui.router", "client_ui"])
or both could be in same module:
// client_UI.js
var route = angular.module('route', ["ui.router"])
// profile.js
var route = angular.module('route')
Check that all working here
这篇关于获取“无法解决……从状态……"；使用嵌套路由 angularjs 时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
