Angularjs - 私は2つのビューでページを設定するには、この例に続い

Question

UIビューに設定されたデフォルトの子ビュー：https://www.thepolyglotdeveloper.com/2014/12/using-nested-states-angularjs-ui-router/

私は今の場所ですべてを持っている、と私は特定のリンク、サブビューをクリックした場合期待どおりに表示されます。あなたが見ることができるように、私はapp.details、app.details.overview、app.details.editを持って

$stateProvider.state('app', 
     name: 'app' 
     url: '/app' 
     abstract: true 
     templateUrl: './sections/menu/menu.tpl.html' 
    ).state('app.home', 
     name: 'home' 
     url: '/home' 
     templateUrl: './sections/Home/Home.tpl.html' 
    ).state('app.details', 
     name: 'appDetails' 
     url: '/details/:zoneID' 
     templateUrl: './sections/zoneDetails/zoneDetails.tpl.html' 
     controller: 'currentZoneFilter' 
    ).state('app.details.overview', 
     name: 'appDetailsOverview' 
     url: '/details/:zoneID' 
     templateUrl: './sections/zoneDetails/zoneDetailsOverview.tpl.html' 
    ).state('app.details.edit', 
     name: 'appDetailsEdit' 
     url: '/details/edit/:zoneID' 
     templateUrl: './sections/zoneDetails/zoneDetailsEdit.tpl.html' 
    ).state('app.setup', 
     name: 'setup' 
     url: '/setup' 
     templateUrl: './sections/setup/setup.tpl.html' 
    ).state 'app.about', 
     name: 'about' 
     url: '/about' 
     templateUrl: './sections/about/about.tpl.html' 
     controller: 'info' 

    $urlRouterProvider.otherwise 'app/home' 

：

はここにあなたが私の状態のすべてを見ることができている私のapp.jsファイル、です。

app.details

は親であり、ここではページのコードです：私はリンクをクリックすると

This it the parent page 
<a ui-sref="app.details.edit">Show edit</a> 
<a ui-sref="app.details.overview">Show overview</a> 
<div ui-view></div> 

、右テンプレートとページセクションが表示されます。私の質問は次のとおりです。このページにアクセスすると、デフォルトで概要が読み込まれるようにするにはどうすればよいですか？

私は.whenはあなたが別のURLを持っている場合は編集テンプレートがロードされたときに...

私のURLは概要テンプレートロードとdetails/edit/:zoneIDで、ページのdetails/:zoneIDあるべき良いと思いますことを、$urlRouterProvider.whenを見ていました、私は.whenは良いアプローチではないと思う。どんな助け？ありがとう

Answer 1

終わりに、私は最終的にこれを解決しました。

私はこのようなapp.details/app.details.overview/app.details.editのための状態のURLを変更：今URLがするzoneidで始まり、それは詳細を追加したりするよう

.state('app.details', 
    name: 'appDetails' 
    url: '/:zoneID' 
    templateUrl: './sections/zoneDetails/zoneDetails.tpl.html' 
    controller: 'currentZoneFilter' 

.state('app.details.overview', 
    name: 'appDetailsOverview' 
    url: '/details' 
    templateUrl: './sections/zoneDetails/zoneDetailsOverview.tpl.html' 

.state('app.details.edit', 
    name: 'appDetailsEdit' 
    url: '/edit/day:day' 
    templateUrl: './sections/zoneDetails/zoneDetailsEdit.tpl.html' 

右側のテンプレートを表示するように編集します。

Answer 2

$ urlRouterProviderのルール関数を使用する必要があります。

$urlRouterProvider.rule(function ($injector, $location) { 
       // check if the location is the desired location then move to the //new location. 
      }); 

Answer 3

ここでは、実装に関する詳細については、https://github.com/angular-ui/ui-router/wikiのチェックについて考えています。現在のルート変更をキャンセルするevent.preventDefault()：

1. $ StateChangeStartの音を聞き、リダイレクトを行う、あなたの状態にこの試合です。
2. コントローラを親状態に追加すると、$ state.currentの値がチェックされ、値が一致すると状態が子にリダイレクトされます（これが私のアプリケーションにあります）。

EDIT：コメントで要求されるように：

if($state.current.name != 'app.details'){ 
     $state.go('app.details.overview'); 
    }