モーダルで経路を指定する

Question

モーダルで私のルートに問題があり、最初のルート（ "/"、menu.html）を取得できますが、ボタンを押すと他のルートは表示されません。

これは私のルートです：

angular.module('ui.bootstrap.demo').config(function($stateProvider, $urlRouterProvider){  
    $stateProvider 
     .state("foo", { 
      url: "/foo", 
      template: '<h1>foo</h1>' 
     }) 
     .state("menu", { 
      url: "/", 
      templateUrl: 'menu.html' 
     }) 
     .state("bar", { 
      url: "/bar", 
      template: '<h1>bar</h1>' 
     }) 

    $urlRouterProvider.otherwise("/"); 
}); 

これは、DIVビューの私のモーダルです：

<div class="modal-header"> 
    <h3 class="modal-title" id="modal-title">I'm a modal!</h3> 
</div> 
<div class="modal-body" id="modal-body"> 
    <div class="row"> 
     <div class="span12 ui-view-container"> 
      <div class="well" ui-view></div>   
     </div> 
    </div>  
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button> 
    <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button> 
</div> 

そして、これが私のmenu.htmlです：

<div class="navbar"> 
    <div class="navbar-inner"> 
     <a class="brand" href="#">Quick Start</a> 
     <ul class="nav"> 
      <li><a href="#/foo">Route 1</a></li> 
      <li><a href="#/bar">Route 2</a></li> 
     </ul> 
    </div> 
</div> 

私はsimple plunkerを作りましたモーダル。

Answer 1

状態プロバイダは、ナビゲートするステート名を取るルートを処理するためにui-srefを持っています。

<ul class="nav"> 
    <li><a ui-sref="foo">Route 1</a></li> 
    <li><a ui-sref="bar">Route 2</a></li> 
</ul> 

更新

あなたはモーダルを開くと、$state.go('menu')を通じてデフォルトの状態 'メニュー' にそれを実行します。 これは怒鳴るように、コントローラで$状態を、仕事注入するために：

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', 
function ($uibModal, $log, $document, $state) { 
...... 

    $ctrl.open = function (size, parentSelector) { 
    $state.go('menu'); 
    ...... 
    } 
}); 

Plunkerコメントクエリで更新。