我是angularjs的新手,我想为我的应用程序使用嵌套的ui-routes。一些代码片段......
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();
这是视图(index.html)...
<!-- route veiw -->
<div class="container" id="route" style="width:90%">
<div ui-view></div>
</div>
<!-- Footer -->
<footer></footer>
我从控制台收到错误消息,指出无法解决&#34;&#39; edit_profile&#39;来自州&#39;简介&#39;&#34;和edit.html应该是profile.html的子状态。我在angularjs中使用ui-routing。我希望能够单击profile.html中的一个按钮,该按钮将状态更改为edit_profile,并将显示在index.html的ui-view中。有关如何解决此问题的任何建议,还是有另一种简单方法可以做到这一点?
答案 0 :(得分:41)
在这种情况下,angular告知我们:我找不到状态edit_profile
。我创建了工作example here
原因实际上是我们必须加载2个js文件:
必须加载 但 都声明相同的模块:
var route = angular.module('route', ["ui.router"])
其中一个必须是不同的或者只是不声明但是使用模块:
// client_UI.js
var route = angular.module('client_ui', ["ui.router"])
// profile.js
var route = angular.module('route', ["ui.router", "client_ui"])
或两者都可以在同一模块中:
// client_UI.js
var route = angular.module('route', ["ui.router"])
// profile.js
var route = angular.module('route')
检查所有工作here