使用 angular UI 路由和 UI 模态在 AngularJS 中创建有状态模态

Question

我正在尝试使用 angular ui 路由和 angular 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'
      }
    }
})

上面的代码能够打开模式，它也将状态更改为欢迎，但由于某种原因，模板没有加载到模式中。我已将模板分配给 ui-view=modal 它应该打开但没有。

请帮帮我。提前致谢

Answer 1

这是错误的做法。

您的路线代表您的应用程序所处的状态。模态的概念就是在捕获可能是完全独立的进程的同时保持状态。你应该做的是为你的模态构建你自己的步进过渡，并使用 ng-if（我更喜欢这个）或 ng-show（可能有其他方法）为每个过渡加载所需的 'template'。

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

Answer 2

我终于可以查看基于状态的模态了。我同意@Obi Onuorah 的观点，模态的概念是保持状态并使用 requirement 执行一些操作。但是如果你需要在状态的基础上显示模态是可能的。

感谢 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

使用 angular UI 路由和 UI 模态在 AngularJS 中创建有状态模态

Creating Stateful Modals in AngularJS with angular UI route and UI modal

angularjs

angular-ui

angular-ui-bootstrap

angular-ui-router