Question

我正在尝试使用角度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, 255, .9)');
        })
      }
    })
    $state.go('signup.welcome')
  }],
  onExit: function(modalInstance) {
    modalInstance.close('dismiss');
    angular.element('.reveal-modal-bg').css('backgroundColor','rgba(0, 0, 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=modal但不是。

请帮帮我。提前谢谢

Answer 1

我终于能够在状态的基础上查看模态。我同意@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', '$state', 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',
    parent: 'modal',
    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>',
        controller: function($scope, test) {
          $scope.test = test;
        },
        resolve: {
          test: function($stateParams) {
            return testObj[$stateParams.id];
          }
        }
      }
    }
  });

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

Answer 2

这是错误的做法。

您的路由代表您的应用程序所处的状态。模态的概念是在捕获可能是完全独立的进程时保持状态。你应该做的是为你的模态建立你自己的步骤转换，并使用ng-if（我更喜欢这个）或ng-show（可能还有其他方式）为每次转换加载所需的“模板”。

如果你想使用路线，那么基本上不要使用模态。

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

2 个答案: