我是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>
我从控制台收到一条错误消息,提示“无法从状态’profile’解析’‘edit_profile’”,并且edit.html应该是profile.html的子状态。我在angularjs中使用ui路由。我希望能够单击profile.html中的按钮,该按钮会将状态更改为edit_profile,并将显示在ui视图中的index.html中。关于如何解决此问题的任何建议,或者还有另一种简单的方法可以做到这一点?
在这种情况下,angular通知了我们: 我根本找不到状态edit_profile。我在这里创建了工作示例
edit_profile
原因实际上是,我们确实必须加载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')
检查所有在这里工作