Question

我无法导航到另一个模板它显示我错误

我也试过ui-sref去注册模板

这里是我的初学者应用程序结构 -

我有

的模板

的login.html
Signup.html
dash.html

这是我的索引页

 <body ng-app="starter">
<ion-tab title="Home" >
      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-tab> 

 <ion-nav-bar >
  <ion-nav-back-button class="button-icon ion-ios7-arrow-back">

  </ion-nav-back-button>
</ion-nav-bar>


     <ion-nav-view >  </ion-nav-view> -->

<ion-header-bar class="bar-stable">
    <h1 class="title">Login</h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>

和我的app.js是

     .state('login', {
      url: '/',
        templateUrl: 'templates/login.html',
       controller: 'LoginCtrl'
  })
.state('Fourm' ,{
    url : '/SignUp',
   templateUrl: 'templates/SignUp.html',
  controller :'SignCtrl'
  })

$urlRouterProvider.otherwise('/');

和我的Controller.js

 .controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state) {
    $scope.data = {};

    $scope.Login = (function() {
        LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
          //var Popup = $ionicPopup.alert({title : 'Login success'})
          alert("Welcome User")
          $state.go('tab');

        }).error(function(data) {
            var alertPopup = $ionicPopup.alert({
                title: 'Login failed!',
                template: 'Please check your credentials!'
            });
        });
    })

)

.controller('SignCtrl' ,  function($scope, $ionicPopup, $state) {
     console.log("in cotrl")
        $scope.SignUp = (function() 
        {

           alert("user")


           $state.go('Fourm');
        });
      })

和我的LoginTemplate

<ion-view view-title="Login" name="login-view">
  <ion-content class="padding">
      <div class="list list-inset" >
          <label class="item item-input">
              <input type="text" placeholder="Username" ng-model="data.username">
          </label>
          <label class="item item-input">
              <input type="password" placeholder="Password" ng-model="data.password">
          </label>
      </div>
      <button class="button button-block button-calm" ng-click="Login()">Login</button>

      <<button class="button button-block button-assertive" ng-click="SignUp()" >SignUp</button>


  </ion-content>
</ion-view>

Answer 1

1）在index.html中放置 ion-tab 不是一个好方法，除非您想在应用中的所有页面中添加标签。

2）ion-tab定义单个标签，该标签应位于 ion-tabs 容器中。

3）在用于标签容器的角度ui路由器中，我们必须使用abstarct true 定义路由。

对于mor信息，您可以看到here

我创建了简单的codepen。哪个会对你有帮助。

所以在 templates / index.html
中
<ion-nav-bar class="bar-positive"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view>

<强>模板/ login.html的

<ion-view view-title="Login" name="login-view"> <ion-content class="padding"> <div class="list list-inset" > <label class="item item-input"> <input type="text" placeholder="Username" ng-model="data.username"> </label> <label class="item item-input"> <input type="password" placeholder="Password" ng-model="data.password"> </label> </div> <button class="button button-block button-calm" ng-click="Login()">Login</button> </ion-content> </ion-view>

<强>模板/ tabs.html

<ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="Login" icon="ion-home" ui-sref="tabs.login"> <ion-nav-view name="login-tab"></ion-nav-view> </ion-tab> <ion-tab title="Signup" icon="ion-ios-information" ui-sref="tabs.signup"> <ion-nav-view name="signup-tab"></ion-nav-view> </ion-tab> </ion-tabs>

//而不是ui-sref我们可以使用ng-click =＆gt; $ state.go（＆＃39; tabs.signup＆＃39;）太

并在 app.js
中
$stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tabs.login', { url: "/login", views: { 'login-tab': { templateUrl: "templates/login.html", controller: 'LoginCtrl' } } }) .state('tabs.signup', { url: "/signup", views: { 'signup-tab': { templateUrl: "templates/signup.html" } } }) $urlRouterProvider.otherwise("/tab/login");

错误：无法路由到离子中的另一个页面

1 个答案: