具有嵌套视图的粘性视图的Angular ui-router

Question

我有一个Shell状态，有两个嵌套状态Home和About。我希望能够从Home或About中打开一个Modal状态，无需主页或关于刷新或从屏幕上删除，就像现在的情况一样。如何修改以使其正常工作？

http://plnkr.co/edit/EWDN3mmd4Nw0ATITrep4?p=preview

＆＃13;

＆＃13;

<div class="container">
  <div ui-view></div>
</div>
<script type="text/ng-template" id="/shell.html">
  <ul class="nav nav-pills">
    <li><a href="#/home">Home</a></li>
    <li><a href="#/about">About</a></li>
    <li><a class="btn btn-default" ui-sref="shell.modal" data-toggle="modal" data-target="#modal">Open Modal</a></li>
  </ul>
  <div ui-view="main"></div>
  <div class="modal fade" id="modal">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <a class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </a>
              </div>
              <div class="modal-body">
                  <div ui-view="modal"></div>
              </div>
          </div>
      </div>
  </div>  
</script>
<script type="text/ng-template" id="/home.html">
  <h1>Home</h1>
  <p>{{now}}</p>
</script>
<script type="text/ng-template" id="/about.html">
  <h1>About</h1>
  <p>{{now}}</p>
</script>
<script type="text/ng-template" id="/modal.html">
  <h1>Modal content</h1>
  <p>{{now}}</p>
</script>
<script>
    var modalApp = angular.module('modalApp', ['ui.router']);

    modalApp.config(function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');

        $stateProvider
                .state('shell', {
                    templateUrl: '/shell.html',
                    controller: function($scope){
                      $scope.now = Date.now();
                    }
                })        
                .state('shell.home', {
                    url: '/home',                  
                    views: {
                      'main@shell': {
                        templateUrl: '/home.html',
                        controller: function($scope){
                          $scope.now = Date.now();
                        }                        
                      }
                    }
                })
                .state('shell.about', {
                    url: '/about',                  
                    views: {
                      'main@shell': {
                        templateUrl: '/about.html',
                        controller: function($scope){
                          $scope.now = Date.now();
                        }                        
                      }
                    }
                })                
                .state('shell.modal', {
                    views: {
                        "modal@shell": {
                            templateUrl: '/modal.html',
                            controller: function($scope) {
                              $scope.now = Date.now();
                            }
                        }
                    }
                });
    });

</script>

＆＃13;

＆＃13;

＆＃13;

（我不想使用Angular UI中的$ modal服务，因为我有类似的嵌套视图要求，不使用模态。）