0
私はこれを勉強しました：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names枯渇。私は、次の作業を取得しようとしている：ビューにテンプレートを含めることができません。
<div class="well" ng-controller="planningCtrl">
<div class="panel panel-default row">
<div class="col-xs-3">
<a class="btn btn-block btn-default btn-lg">
Add a plan
</a>
</div>
<div class="col-xs-9">
<div ui-view="plan"></div>
</div>
</div>
</div>
Debug<br />
<pre>{{state}}</pre>
<pre>{{stateParams}}</pre>
レンダリングされた場合：ビューを含む部分（またはあなたがそれを呼び出すために好きなテンプレートまたは）で満たされます
...
<div ui-view="mdd"></div>
...
静的に次のようになります。
...
<div ui-view="mdd">
<div ui-view="plan"></div>
</ui-view>
...
そして私は、計画テンプレートがロードされたときに、UI-ルータは平面図にして部分的にプラグインする取得する方法を見つけ出すことはできません。プランテンプレートはうまくいきましたが、最初のビューを平面図に表示できません。
はここでアプリのための私の設定です：
.config(
[
'$stateProvider'
, '$urlRouterProvider'
, function(
$stateProvider
, $urlRouterProvider)
{
/*
* Make sure that a default path is defined for when no
* state matches.
*/
$urlRouterProvider.otherwise('welcome') ;
/*
* These are states which will get more complicated when I start
* to nest views.
*/
$stateProvider
.state(
'login'
, {
url: '/login'
, views:
{
'mdd': {
templateUrl: "view/login.html"
}
}
})
.state(
'planning'
, {
url: '/planning'
, views:
{
'mdd': {
templateUrl: "view/planning.html"
, controller: 'planningCtrl' // you have to specify the controller here using ui-router.
}
, '[email protected]':
{
templateURL: 'view/plan/welcome.html'
, controller: 'planningCtrl' // you have to specify the controller here using ui-router.
}
}
})
/* .state(
'planning.welcome'
, {
views:
{
'[email protected]':
{
templateURL: 'view/plan/welcome.html'
}
}
})*/
.state(
'welcome'
, {
url: '/welcome'
, views:
{
'mdd':
{
templateUrl: "view/welcome.html"
}
}
}) ;
}
]) ;
とノー喜びとビューと状態名のバリエーションの数を試みました。任意のポインタが評価されるだろう。私はおそらく間違った何かをしているだろうが、私がそれが何であるか分かっていれば、私は尋ねていないだろう。
私はもう少しポンをかけて、やっぱり困惑しましたが、これは誰かがこれを理解するのに役立ちます。ここに、ui-routerからどのような状態のデバッグ情報を含むHTMLが生成されます。これはmddビューに組み込まれていますが、別のビュー（ウェルカムページ）がプレーンビューに埋め込まれていません：
<!DOCTYPE html>
<html class="ng-scope" ng-app="mdd" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta charset="UTF-8">
<title>My Divorce Decisions</title>
<link href="My%20Divorce%20Decisions_files/bootstrap.css" rel="stylesheet">
<link href="My%20Divorce%20Decisions_files/bootstrap-theme.css" rel="stylesheet">
<script src="My%20Divorce%20Decisions_files/angular.js"></script>
<script src="My%20Divorce%20Decisions_files/angular-resource.js"></script>
<script src="My%20Divorce%20Decisions_files/angular-ui-router.js"></script>
<script src="My%20Divorce%20Decisions_files/mdd.js"></script>
<script src="My%20Divorce%20Decisions_files/sessionSrvc.js"></script>
<script src="My%20Divorce%20Decisions_files/userSrvc.js"></script>
<script src="My%20Divorce%20Decisions_files/mddCtrl.js"></script>
<script src="My%20Divorce%20Decisions_files/loginCtrl.js"></script>
<script src="My%20Divorce%20Decisions_files/planningCtrl.js"></script>
</head>
<body class="ng-scope" ng-controller="mddCtrl">
<div class="panel panel-default">
<div class="panel-body"><a href="#/welcome" ui-sref="welcome">My Divorce Decisions</a></div>
</div>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#/welcome" ui-sref="welcome">Home</a></li>
<li><a class="" href="#/planning" ui-sref="planning" ng-show="isLoggedIn()">Begin Planning</a></li>
<li><a class="ng-hide" href="#/login" ui-sref="login" ng-hide="isLoggedIn()">Sign In</a></li>
<li><a class="ng-scope" ng-click="logout()" ng-show="isLoggedIn()" ng-controller="loginCtrl">Sign Out</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="ng-binding" ng-show="isLoggedIn()">esplanner</a></li>
</ul>
</div>
</div>
<!-- uiView: mdd --><div class="ng-scope" ui-view="mdd"><div class="well ng-scope" ng-controller="planningCtrl">
<div class="panel panel-default row">
<div class="col-xs-3">
<a class="btn btn-block btn-default btn-lg">
Add a plan
</a>
</div>
<div class="col-xs-9">
<!-- uiView: plan --><div class="ng-scope" ui-view="plan"></div>
</div>
</div>
</div><span class="ng-scope">
Debug</span><br class="ng-scope">
<pre class="ng-binding ng-scope">{"url":"/planning","views":{"mdd":{"templateUrl":"view/planning.html","controller":"planningCtrl"},"[email protected]":{"templateURL":"view/plan/welcome.html"}},"name":"planning"}</pre>
<pre class="ng-binding ng-scope"></pre>
</div>
<div class="panel panel-default">
<div class="panel-body">
Footer
</div>
</div>
</body></html>
この見れ：http://plnkr.co/edit/g9wgfMkD6TE3eqhDpkM1?p=info
状態情報は、この作業をしなければならないと言うとそうではありません。
FWIWでは、console.welcomeテンプレートをロードするためのHTTPリクエストがコンソールに表示されません。読み込まれている計画ビューを示します。 – user1416192