AngularJS UI-Router嵌套视图

时间:2015-06-10 18:25:57

标签: angularjs angular-ui-router

我试图在我的模态中放置一个嵌套视图。我可以将第一层视图拉得很好但嵌套视图却以某种方式欺骗了我。不确定我在这里缺少什么?

http://plnkr.co/edit/g9cScdORPOz57zGCzQDA

var App = angular.module('App', ['ui.router']);

// routes
// -------------------------
App.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  // default state route
  .state('app',{
    url: '/',
    views: {
      'content': {
        templateUrl: 'home.html'
      },
      'modals': {
        templateUrl: 'modal.html'
      }
    }
  })

  // + modal content
  .state('app.form', {
      url: '/form',
      views: {
        'modal-content@modals': {
          templateUrl: 'form.html'
        }
      }
  })

  //catch all route
  $urlRouterProvider.otherwise('/');

})

2 个答案:

答案 0 :(得分:1)

像Nikhil.agw所说,当你打开你的模态时,你并没有改变你的状态。

你可以这样做:http://plnkr.co/edit/eMNBBUYmKI6PRPiyU4xx?p=preview

<li><a href="#" data-toggle="modal" ui-sref="app.form" data-target="#myModal">Open this modal</a></li>

然后只需在模态关闭时包含一种返回上一状态的方法。

答案 1 :(得分:0)

它不会起作用,因为在点击时你只是切换模态。您的州/路线未被更改。并且路由/状态没有被改变,嵌套状态将如何进入图片?