angularjs – 使用angular-ui-router和bootstrap $modal创建一个

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

导读：FAQ for ui-router有一个关于与bootstrap $ modals集成的部分，但它没有提到任何关于抽象视图。我有一个单一的抽象视图下有3个视图，所以像下面的东西。 $stateProvider .state('setup',{ url: '/setup',templateUrl: 'initialSetup.html',controller: 'Init

FAQ for ui-router有一个关于与bootstrap $ modals集成的部分，但它没有提到任何关于抽象视图。我有一个单一的抽象视图下有3个视图，所以像下面的东西。

$stateProvider
   .state('setup',{
     url: '/setup',templateUrl: 'initialSetup.html',controller: 'InitialSetupCtrl','abstract': true
   })  

   // markup for the static view is
   <div class="wizard">
     <div ui-view></div>
   </div> 

   .state('setup.stepOne',{
      url: '/stepOne',controller: 'SetupStepOneCtrl',onEnter: function($stateParams,$state,$modal) {
        $modal.open{
          backdrop: 'static',templateUrl: 'setup.stepOne.html',controller: 'SetupStepOneCtrl'
        })
      }   
   })  

   .state('setup.stepTwo',{
     url: '/stepTwo',controller: 'SetupStepTwoCtrl',$modal) {
       $modal.open({
         backdrop: 'static',templateUrl: 'setup.stepTwo.html',controller: 'SetupStepTwoCtrl'
       })
     }   
    })  

    .state('setup.stepThree',{
      url: '/stepThree',templateUrl: 'setup.stepThree.html',controller: 'SetupStepThreeCtrl'
      ...
    }); 
}]);

我也试图只添加onEnter块到抽象状态，并从3个子状态中的每一个删除onEnter。这在我看来似乎是正确的方法。抽象状态初始化并打开$ modal，后续的状态应该插入，但是当我尝试这个ui-view容器是空的。

我可以想到一些其他的方法来解决这个问题，但我想问我看看是否有一个规范的方式来处理这个。

另一种方法是在$ modal控制器中使用ng-switch和ng-include组合来动态加载向导步骤模板，也就是说，如果您不介意为所有向导步骤共享同一个控制器：

<div ng-switch="currentStep.number">
  <div ng-switch-when="1">
    <ng-include src="'wizardModalStep1.html'"></ng-include>
  </div>
  <div ng-switch-when="2">
    <ng-include src="'wizardModalStep2.html'"></ng-include>
  </div>
  <div ng-switch-when="3">
    <ng-include src="'wizardModalStep3.html'"></ng-include>
  </div>
</div>

Here is Plunker with working example: 07000

希望帮助别人！

（编辑：李大同）

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