UIルータで動作する孫の状態を取得できません

私は角度1.6.2とUIルータを使用しています。私はまだコンセプトを正しく学びたいと思っていますが、ロードブロックに来ました。UIルータで動作する孫の状態を取得できません

という親の状態がMainControllerを使用し、子ステートの束を持っています。しかし、私は今、孫の状態を作ることで一層深く行きたいと思っています。

次のコードは、www.example.com/manage-users/edit/1をロードして、祖父母状態をロードしていないときに空白のページを表示します。

appの親はedit-usersです（私は3番目のレベルにしたいものです）が、それは本当に正しい方法ではありません。これ以降は、他の理由で親状態を使用する必要があるためです。

index.htmlを

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <base href="/"> 
    // loading JS/CSS etc 
</head> 
<body ng-app="sampleApp"> 
<div class="container"> 
    <div ui-view></div> 
</div> 
</body> 
</html>

parent.html

<div ng-controller="MainController as data"> 
    // more html 
    <div ui-view></div> 
</div>

管理-users.html

<div class="col-sm-12" ng-controller="UserController as data"> 
    // more html 
    <div ui-view></div> 
</div>

管理 - ユーザー - edit.html代わりに状態を設定する「管理 - ユーザーの

<div>Hello World! This is the Edit HTML Page</div>

app.js

$stateProvider 
    .state('app', { 
     templateUrl: 'views/parent.html', 
     controller: 'MainController as data' 
    }) 
    .state('manage-users', { 
     parent: 'app', 
     url: '/manage-users', 
     templateUrl: 'views/manage-users.html', 
     controller: 'MainController as main' 
    }) 
    .state('edit-users', { 
     parent: 'manage-users', 
     url: '/manage-users/edit/:id', 
     templateUrl: 'views/manage-users-edit.html', 
     controller: 'MainController as main' 
    });

出典

2017-02-22 Adrian

の（私は親状態を作るときにのみ機能「アプリ」これを試してみてください：

index.htmlを

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <base href="/"> 
     // loading JS/CSS etc 
    </head> 
    <body ng-app="sampleApp"> 
     <div class="container" ui-view="container"></div> 
    </body> 
</html>

あなたは常にあなたの子供に移動しなければならない

parent.html

<div ng-controller="MainController as data"> 
    // more html 
    <div ui-view="parent"></div> 
</div>

管理-users.html

<div class="col-sm-12" ng-controller="UserController as data"> 
    // more html 
    <div ui-view="manageusers"></div> 
</div>

app.js

$stateProvider 
    .state('app', { 
     views:{ 
      'container': { 
       templateUrl: 'views/parent.html', 
       controller: 'MainController as data' 
      } 
     } 
    }) 
    .state('app.manage-users', { 
     url: '/manage-users', 
     views:{ 
      'parent':{ 
        templateUrl: 'views/manage-users.html', 
        controller: 'MainController as main' 
       } 
     } 
    }) 
    .state('app.manage-users.edit-users', { 
     url: '/edit/:id', 
     views:{ 
      'manageusers':{ 
        templateUrl: 'views/manage-users-edit.html', 
        controller: 'MainController as main' 
       } 
     } 
    });

階層。この場合、$state.go('app.manage-users.edit-users')

EDIT：

状態の設定であなたのURLプロパティが間違っています。期待どおりの結果を得るには、http://exapmle.com/#/manage-users/edit/1と入力してください。

私はconfigを更新しているので、URLから余分な管理ユーザーが削除されています。試してみます。

出典

2017-02-23 10:13:51 mbeso

これはおかげでもう少し学び、私の 'ui-view'sなどを配置するのに役立ちました。実際にあなたのビュー戦略を上記のように適用しました。しかし、すべてのことにもかかわらず、一度、私は 'edit-users'に、' app'が失敗する親を持つように指示します。 – Adrian

あなたの編集で問題が見つかりました！その後、今働いて、ありがとう！ – Adrian

UIルータで動作する孫の状態を取得できません

答えて

関連する問題