0
私は角度jsプロジェクトで抽象ビューを入れ子にしました。
入れ子抽象ビューに移動するとError : Cannot transition to abstract state 'main.middle'が表示されます。
私htmlコードは以下の通りです：AngulaJS入れ子抽象ビューに移動
<!DOCTYPE html>
<html ng-app="nesting">
<head>
<script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="[email protected]*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
href:
<br />
<a href="#/alpha">#/alpha</a>
<a href="#/beta">#/beta</a>
<a href="#/gama">#/gama</a>
<button ng-click="moveToMiddle()">move to middle</button>
<br />
ui-sref:
<br />
<a ui-sref="main.middle.alpha">main.middle.alpha</a>
<a ui-sref="main.middle.beta">main.middle.beta</a>
<a ui-sref="main.middle.gama">main.middle.gama</a>
<hr />
<div ui-view=""></div>
<script>
'use strict';
var $urlRouterProviderRef = null;
var $stateProviderRef = null;
var app = angular.module('nesting', [
'ui.router'
]);
app.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/alpha');
$stateProvider
.state('main', {
url: "",
abstract: true,
template: '<div><h3>Main</h3><div ui-view=""></div></div>',
})
.state('main.middle', {
url: "",
abstract: true,
template: '<div><h4>Middle</h4><div ui-view=""></div></div>',
})
.state('main.middle.alpha', {
url: "/alpha",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
.state('main.middle.beta', {
url: "/beta",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
.state('main.middle.gama', {
url: "/gama",
template: '<div><h5>The leaf: {{state.name}}</h5></div>',
controller: function ($scope, $state){
$scope.state = $state.current;
},
})
;
});
app.controller('testController', function ($scope, $state) {
$scope.moveToMiddle = function() {
$state.go('main.middle');
}
})
</script>
</body>
</html>
私はエラーを得たmove to middleボタンをクリックします。
抽象ビューに移動する方法を教えてもらえますか？
私はthisを参照していますが、私の場合はそれが役に立たない。
このようなシナリオをどのように扱うのか、私はリンクをクリックすると '中間 'に' alpha'、 'beta'と' gama'に 'link'があります。' middle 'view reloaded。 （この場合は 'middle'は' abstract'ではありません） –
申し訳ありませんが、私は完全に理解していません。これらの3つの 'ui-sref'リンクの1つをクリックすると、対応する中間の子状態をロードする必要があります。 –
どのようなシナリオですか？上のコードは抽象として 'main.middle'を持っています。 –