如何使用ng-repeat在向导步骤中重新加载/刷新

时间:2019-01-14 13:20:53

标签: angularjs

我有一个向导步骤,其中包含具有不同控制器的多个视图,但是我的向导是第一次加载控制器,此后,如果我单击next / prev,则不会再次加载每个向导的控制器。当我按下下一个/上一个按钮时,如何加载控制器的每个视图?

WizardTemplate:

<div class="tiga-flex-stretched tiga-flex-parent">
  <div id="wizard-container" class="tiga-flex-stretched tiga-flex-parent">            
    <div id="wizard-step-container" class="tiga-flex-fixed">
      <ul class="nav nav-pills nav-justified">
        <li ng-repeat="step in Steps" ng-class="{'active':step.step == CurrentStep}"><a href="">{{step.step}}. {{step.name}}</a></li>
      </ul>
    </div>
    <div id="wizard-content-container"class="tiga-flex-stretched tiga-flex-parent" >
      <div dynamic-ctrl="GetControllerTemplate()" class="tiga-flex-stretched tiga-flex-parent">
        <ng-include src="GetStepTemplate()" class="tiga-flex-stretched tiga-flex-parent"></ng-include>
      </div>
    </div>                    
  </div>          
</div>  

这是下一个/上一个步骤代码:

 <button ng-disabled="CurrentStep <= 1" class="btn btn-default" name="previous" type="button" ng-click="GoToStep(CurrentStep - 1)"><i class="fa fa-arrow-left"></i> Previous step</button>
  <button ng-disabled="CurrentStep >= Steps.length" class="btn btn-primary" name="next" type="button" ng-click="GoToStep(CurrentStep + 1)">Next step <i class="fa fa-arrow-right"></i></button>

Wizard.Js:

  function Main()
  {
    GenerateSteps();    
  }

  function GenerateSteps()
  {
    for( var i = 0; i < _wizardTemplate.length; i++ )
    {
       var template = _wizardTemplate[ i ];      
      $scope.Steps.push( { step : i + 1, name : template.stepsName, template : template.viewTemplate + '.html', controller : template.controllerTemplate } );      
    }
  }

   function GoToStep( newStep )
   {
     $scope.CurrentStep = newStep;
   }

   function GetStepTemplate()
   {
     for( var i = 0; i < $scope.Steps.length; i++ )
     {
       if( $scope.CurrentStep == $scope.Steps[ i ].step )
       {
         var path = "Modules/CustomActions/Templates/" + $scope.Steps[ i ].template;
         return path;
       }
     }
   }

   function GetControllerTemplate()
   {
     for( var i = 0; i < $scope.Steps.length; i++ )
     {
       if( $scope.CurrentStep == $scope.Steps[ i ].step )
       {
         return $scope.Steps[ i ].controller;
       }
     }
   }

0 个答案:

没有答案