angularjs – 模态内的嵌套视图未显示. (ui-router和ui-bootstra

发布时间：2020-12-17 17:04:08 所属栏目：安全来源：网络整理

导读：我在创建响应应用程序状态的模式时遇到了问题. 从角度ui-router wiki我看到了如何实现我的目标,但我的代码没有工作,我不知道为什么原因如下：当启动模式中的应用程序路由器/ sign /时我可以在我的控制台上看到以下输出 = “about.sign” = “about.sign.in

我在创建响应应用程序状态的模式时遇到了问题.
从角度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',$modal){
          console.log('about.sign.in')
        },views: {
          'bar-view': {
            template: 'Sign in #1'
          }
        }

      })
      .state('about.sign.up',{
        url:'sign/up',views: {
          'bar-view': {
            template: 'Sign up #2'
          }
        }

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

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

解决方法

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

这是plunker

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

    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('view',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',views: {
          'modal@': {
            template: '<p>sign-out</p>'
            }
          }
      })
    }]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!