2016-12-14 70 views
0

我無法找到它的另一頁另一個模板 它表明了我的錯誤上面錯誤:無法路由到離子

,我也試圖與UI SREF去註冊templete

  • 在這裏我入門的應用程序結構 -

我有

    模板
  1. 的login.html
  2. Signup.html
  3. 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> 

回答

1

1)不把離子標籤 index.html中,除非你的好方法想要在你的應用程序的所有頁面選項卡。

2)ion-tab定義單個標籤,應該在離子標籤容器中。

3)在標籤容器的角度ui路由器中,我們必須定義路由,其中​​abstarct爲真

如需更多信息,您可以看到here

我創造了簡單codepen。哪個會幫助你。

所以在模板/ 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> 

//instead of ui-sref we can use ng-click => $state.go('tabs.signup') too.

應用程序。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"); 
+0

嘿感謝您的反饋,也許這可以幫助我 –

相關問題