获得＆QUOT;不能从国家解决......＆QUOT;使用嵌套路线angularjs时错误 [英] Getting "could not resolve ... from state ..." error when using nested routes angularjs

问题描述

我是新来angularjs，我想使用嵌套的UI路线我的申请。有些code片段...

I'm new to angularjs and I want to use nested ui-routes for my application. Some code snippets ...

profile.html

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

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

edit.html

<script src="Scripts/angular-ui-bootstrap.js"></script>


    <!-- title -->
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</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 &nbsp;</label>
                <input placeholder="{{infos.Name}}" id="name" type="text" ng-model="name">
            </div>

profile.js

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的）...

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>

我是从，说控制台，收到错误无法从国家的个人资料'edit_profile'和edit.html解决应该是profile.html的孩子的状态。我使用的UI angularjs路由。我希望能够点击，这将改变edit_profile状态，将显示在index.html中的用户界面视图的profile.html一个按钮。如何解决这个问题，或有另一种简单的方法来做到这一点有什么建议？

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?

推荐答案

在这种情况下，角被告知我们：的我根本无法找到状态 edit_profile 的。我在这里创造工作例如

In this case, angular is informing us: I simply cannot find the state edit_profile. I created working example here

究其原因，其实我们真的需要加载2 js文件：

The reason is in fact, that we really have to load 2 js files:

• profile.js


• client_UI.js

他们两个的必须加载但他们两人的不能声明相同的模块：

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')

检查所有工作这里

这篇关于获得＆QUOT;不能从国家解决......＆QUOT;使用嵌套路线angularjs时错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！