Question

我在创建响应应用程序状态的模式时遇到问题。从角度ui-router wiki我看到了如何实现我的目标，但我的代码不起作用，我没有弄清楚原因，原因如下：

当启动模式中的应用程序路由器为/ sign /时
我可以在控制台看到以下输出

=> "about.sign"

=> "about.sign.in"
2）意味着路由器和射击！换句话说，应该打开模态about.sign，并将about.sign.in状态的模板插入到其父模板上，更准确地说是在标记上。

我尝试了两种技术。命名为ui-views和匿名但没有用。

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

 var app = angular.module('app.auth',
    [
      'ui.bootstrap',
      'ui.router'
    ]);

  app.config(function($stateProvider){
    $stateProvider
      .state('about',{
        url: '/',
        views:{
          'main': {
            templateUrl: 'about/about.tpl.html'
          }
        }
      })
      .state('about.sign',{
        url: '',
        onEnter: function($stateParams, $state, $modal){
          console.log('about.sign')
          var modalInstance = $modal.open({
            template:'<h1>Modal</h1><div ui-view="bar-view"></div>',
            size: 'sm',
          });
        }
      })
      .state('about.sign.in',{
        url:'sign/in',
        onEnter: function($stateParams, $state, $modal){
          console.log('about.sign.in')
        },
        views: {
          'bar-view': {
            template: 'Sign in #1'
          }
        }

      })
      .state('about.sign.up',{
        url:'sign/up',
        onEnter: function($stateParams, $state, $modal){
          console.log('about.sign.in')
        },
        views: {
          'bar-view': {
            template: 'Sign up #2'
          }
        }

      })
  }); //end of app.config

我是否对这些嵌套视图做错了？

Answer 1

我也碰到了这个。事实证明你需要使用“父”而不是点符号。

以下是plunker

angular.module('app', ['ui.router', 'ui.bootstrap'])
  .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('view', {
        url: '',
        template: '<button class="btn btn-default" ui-sref="modal"> Modal</button> <ui-view />',
        controller: function($scope) {
        }
      })
      .state('modal', {
        //abstract: true,
        parent: 'view',
        url: '/modal',
        onEnter: ['$modal', '$state', function($modal, $state) {
            console.log('Open modal');
            $modal.open({
              template: '<button class="btn btn-danger" ui-sref="signin"> sign-in </button> <button ui-sref="signout" class="btn btn-success"> sign-out </button> <div ui-view="modal"></div>',
              backdrop: false,
              windowClass: 'right fade'
            }).result.finally(function() {
              $state.go('list');
          });
        }]
      })
      .state('signin', {
        url: '/signin',
        parent: 'modal',
        views: {
          'modal@': {
            template: '<p>sign-in</p>'
            }
          }
      })
      .state('signout', {
        url: '/signout',
        parent: 'modal',
        views: {
          'modal@': {
            template: '<p>sign-out</p>'
            }
          }
      })
    }]);

Answer 2

我认为接受的答案是好的。（诀窍是使用modal@而不仅仅是modal来命名视图 - 请参阅the docs以获得解释。）但我想我会发布一个更通用的解决方案，以防其他人谁来看这里有类似的问题。（我花了很长时间才弄明白这一切。）

我的方法的一个显着差异是我决定创建一个控制器来启动模态，而不是使用onEnter钩子（即使我看到的所有其他示例都使用onEnter），因为{ {1}}不允许您访问范围。这样，模态和子状态的控制器都可以从同一父范围继承。

有趣的警告：子状态的命名视图不能引用父状态。模态实际上创建了自己的状态，因此在我的示例中，onEnter状态的上下文中不存在ui-view="modal" - 它存在于未命名的根模板中（因此子视图必须为{ {1}}，而非launch_modal）。

modal@

希望能帮助一些人！

模态内的嵌套视图未显示。（ui-router和ui-bootstrap）

2 个答案:

模态内的嵌套视图未显示。 （ui-router和ui-bootstrap）

2 个答案:

模态内的嵌套视图未显示。（ui-router和ui-bootstrap）