2015-09-28 34 views
0

有人可以幫我解決這個問題嗎? 似乎我無法讓我的按鈕鏈接到另一個頁面。 我做了一些研究,並嘗試按照演示,但它是死衚衕。 我不知道我應該修復哪個部分。離子與角js。該按鈕沒有鏈接到另一個html

register.html

<!DOCTYPE html> 
<html ng-app="starter"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    </head> 
    <body ng-app="starter"> 

    <ion-pane> 

     <ion-view view-title="Register"> 
     <ion-content> 
      <div class="bar bar-header bar-stable"> 
      <h1 class="title">Register</h1> 
     </div> 
     <div ng-controller="RegistrationCtrl" class="content"> 
      <button class="button button-positive" ng-click="goToNextState()">Go to next state (page)</button> 
     </div> 
     </ion-content> 
    </ion-view> 



    </ion-pane> 
    </body> 
</html> 

after.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    </head> 
    <body ng-app="starter"> 

    <ion-pane> 

     <ion-view view-title="After"> 
     <ion-content> 
      <div class="bar bar-header bar-stable"> 
      <h1 class="title">Register</h1> 
     </div> 
      <div ng-controller="AfterCtrl" class="content"> 
       <button class="button button-positive" ng-click="goToPrevState()">Go to prev state (page)</button> 
      </div> 
     </ion-content> 
     </ion-view> 


    </ion-pane> 
    </body> 
</html> 

app.js

var app = angular.module('starter', ['ionic']) 
app.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

app.config(function($stateProvider, $urlRouterProvider) { 
     $stateProvider 
      .state('register', { 
       url: '/', 
       templateUrl: 'register.html', 
       controller: 'RegistrationCtrl' 
      }) 
      .state('after', { 
       url: 'after', 
       templateUrl: 'after.html', 
       controller: 'AfterCtrl' 
      }); 
     $urlRouterProvider.otherwise('/'); 
    }); 

app.controller("RegistrationCtrl", function($scope, $location){ 
     $scope.goToNextState = function() { 
     $location.path("/after"); 
     }; 
    }); 

app.controller("RegistrationCtrl", function($scope, $location){ 
     $scope.goToNextState = function() { 
     $location.path("/after"); 
     }; 
    }); 

回答

0

我找不到你app.js AfterCtrl控制器

app.controller("RegistrationCtrl", function($scope, $location){ 
     $scope.goToNextState = function() { 
     $location.path("/after"); 
     }; 
    }); 

app.controller("RegistrationCtrl", function($scope, $location){ 
     $scope.goToNextState = function() { 
     $location.path("/after"); 
     }; 
    }); 

此外,我會建議使用$state.go("register")$state.go("after"),也不要忘了注入$狀態

功能($範圍,$狀態)

0

我碰到了類似的問題,最近。我發現使用

<button class="button button-positive" ui-sref="STATENAME" >Go to prev state (page)</button> 解決了我的問題。

相關問題