2016-02-26 24 views
2

我有几个ons模板在页面中,每个模板都绑定到它的控制器,现在如何从控制器首先重定向到ons模板second.html成功ajax调用后,下面是我的码。重定向到从控制器的ons模板

<ons-template id="changePass.html"> 
    <ons-page modifier="shop-details" class='page_bg'> 
     <ons-toolbar style="background-color: #16A500;"> 
      <div class="left"> 
       <ons-toolbar-button onclick="menu.setMainPage('userProfile.html', {closeMenu: true}), {animation: 'slide'}"> 
        <ons-icon icon="ion-arrow-left-c" size="28px" fixed-width="false"></ons-icon> 
       </ons-toolbar-button> 
      </div> 
      <div class="center">Change Password</div> 
     </ons-toolbar>   

     <div ng-controller="userProfile"> 
      <div ng-show="loading" class="loading"><img src="img/loading.gif" height="50px" width="50px"></div> 
      <div class="profile-card"> 
       <img src="{{profiledata.profile_image_url}}" class="profile-image-settings"> 
       <div class="profile-name">{{profiledata.firstname}} {{profiledata.lastname}}</div>         
      </div><br> 
      <div class="form-row"> 
       <input type="password" id="cpass" class="text-input--underbar width-full" placeholder="Current Password" value=""> 
      </div> 
      <div class="form-row"> 
       <input type="password" id="npass" class="text-input--underbar width-full" placeholder="New Password" value=""> 
      </div> 
      <div class="form-row"> 
       <input type="password" id="cnpass" class="text-input--underbar width-full" placeholder="Confirm New Password" value=""> 
      </div> 
      <div class="form-row"> 
      <p style="font-size: small; color: red;">- Must be between 8 and 16 characters long.<br> 
       - Must contain at least 3 of following.<br> 
       - English uppercase letter (A to Z).<br> 
       - English lowercase letter (a to z).<br> 
       - Numerical digit (0 to 9).<br> 
       - Special character (#, $, ^, etc.). </p> 
      </div>    
      <ons-bottom-toolbar modifier="transparent"> 
       <ons-button modifier="large" class="login-button" ng-click="changePass();">Save</ons-button> 
      </ons-bottom-toolbar> 
     </div> 
    </ons-page> 
</ons-template> 

    $scope.changePass = function(){ 
    var cpass = document.getElementById('cpass').value; 
    var npass = document.getElementById('npass').value; 
    var cnpass = document.getElementById('cnpass').value; 

    $.ajax({ 
     type: 'GET', 
     url: serviceURL+'account/change_password', 
     data: {user_id: user_id, authentication_key: authentication_key, current_password: cpass, new_password: npass, confirm_password: cnpass}, 
     timeout: 5000, 
     success: function (response) {    
      alert(response); 
      $scope.loading = false; 
      $scope.questions = JSON.parse(response).data; 
      $scope.$apply();    
     },  
     error: function (response) { 
      $scope.error = true; 
      $scope.$apply(); 
     } 
    }); 
}; 

所以当Ajax请求成功,我想重定向到另一个一些插件模板可以说home.html的。

回答

2

你只需要为你的导航器使用pushPage。最简单的方法是:

document.getElementById('myNavID').pushPage('second.html'); 

对于角度,您可以使用:

myNav.pushPage('second.html'); 

这里的参考文件,有一个工作示例:https://onsen.io/2/reference/ons-navigator.html

+0

不以这种方式工作 –

+0

您可以发布您完全控制? – Munsterlander

+0

更新了完整的代码。 –