使用角度UI路径和UI模式在AngularJS中创建有状态模态

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

导读：我正在尝试使用角度ui路线和角度ui模态制作状态模态. 假设我想填写一个包含4页的注册表单.所有这些页面都是模态的. 我能够在状态变化上打开模态.但之后我想在国家的基础上打开模态的每一页. $stateProvider.state('signup',{ url: '/signup',template: 'ui-v

我正在尝试使用角度ui路线和角度ui模态制作状态模态.

假设我想填写一个包含4页的注册表单.所有这些页面都是模态的.

我能够在状态变化上打开模态.但之后我想在国家的基础上打开模态的每一页.

$stateProvider.state('signup',{
  url: '/signup',template: '<ui-view />',abstract: true
})
.state('signup.modal',{
  url: '',resolve: {
    modalInstance: function($modal) {
      return $modal.open({
        template: '<div ui-view="modal"></div>',controller: 'signUp',windowClass: 'signup-edit-modal',backdrop: 'static'
      })
    }
  },onEnter: ['modalInstance','$timeout','$state',function(modalInstance,$timeout,$state) {
    modalInstance.opened.then(function(status){
      if(status){
        $timeout(function(){
          // changing color of background / backdrop of modal for signup
          angular.element('.reveal-modal-bg').css('backgroundColor','rgba(255,255,.9)');
        })
      }
    })
    $state.go('signup.welcome')
  }],onExit: function(modalInstance) {
    modalInstance.close('dismiss');
    angular.element('.reveal-modal-bg').css('backgroundColor','rgba(0,0.45)');
  }
})
.state('signup.welcome',{
  url: "/welcome",views: {
      modal: {
        templateUrl: 'main/signup/welcome.html',controller: 'signupWelcome'
      }
    }
}).state('signup.step1',{
  url: "/step1",views: {
      modal: {
        templateUrl: 'main/signup/step1.html',controller: 'signupStep1'
      }
    }
})

上面的代码能够打开模态,它也会将状态更改为welcome,但由于某种原因,模板未加载到模态中.
我已经将模板分配给它应该打开但未打开的ui-view =模态.

请帮我.提前致谢

解决方法

我终于能够在国家的基础上查看模态.我同意@Obi Onuorah的观点,即模态的概念是保持状态并按要求执行某些操作.但是如果你需要在状态的基础上显示模态,那么它是可能的.

感谢angular-ui路线的精彩文件
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names—relative-vs-absolute-names
它精美地解释了ui-view的绝对命名与相对命名之间的差异.

这是UI路由的示例代码

$stateProvider
  .state('list',{
    url: '/',template: '<ul><li ng-repeat="test in testObj"><a ui-sref="view({id: test.id})">{{ test.name }}</a></li></ul>',controller: function($scope) {
      $scope.testObj = testObj;
    }
  })
  .state('modal',{
    abstract: true,parent: 'list',url: '',onEnter: ['$modal',function($modal,$state) {
        console.log('Open modal');
        $modal.open({
          template: '<div ui-view="modal"></div>',backdrop: false,windowClass: 'right fade'
        }).result.finally(function() {
          $state.go('list');
      });
    }]
  })
  .state('view',{
    url: ':id',parent: 'modal',views: {
      'modal@': {
        template: '<h1>{{ test.name }}</h1><br />
        <a ui-sref="edit({id: test.id})">Edit</a><br />
        <a href="#" ng-click="$close()">Close</a>',controller: function($scope,test) {
          $scope.test = test;
        },resolve: {
          test: function($stateParams) {
            return testObj[$stateParams.id];
          }
        }
      }
    }
  })
  .state('edit',{
    url: ':id/edit',views: {
      'modal@': {
        template: '<h1>Edit {{ test.name }}</h1><br /> 
          <a ui-sref="view({id: test.id})">View</a> <br />
          <a href="#" ng-click="$close()">Close</a>',resolve: {
          test: function($stateParams) {
            return testObj[$stateParams.id];
          }
        }
      }
    }
  });

我做了一个简单的plunker.
http://plnkr.co/edit/hw9x7B?p=preview

（编辑：李大同）

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