2017-02-24 123 views
1

我是新來的離子的,我試圖導航到使用此代碼的另一頁:無法解析從狀態「狀態」「」

HTML的index.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 rel="manifest" href="manifest.json"> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <script src="cordova.js"></script> 
    <script src="js/app.js"></script> 
    </head> 
    <body ng-app="Humanity" ng-controller="main"> 



     <div style="with:100%;"> 
     <img src="img/loginlogo.png" style="display:block;margin:0 auto;"> 
     </div> <br> 
<div class="list"> 
    <label class="item item-input item-floating-label"> 
    <span class="input-label">Email</span> 
    <input type="text" placeholder="First Name"> 
    </label> 
    <label class="item item-input item-floating-label"> 
    <span class="input-label">Password</span> 
    <input type="text" placeholder="Last Name"> 
    </label> 

</div> 
<button ng-click="test();" class="button button-block icon-right ion-chevron-right button-balanced" style="width:90%;display:block;margin:0 auto;"> 
    Sign in 
</button><br> 

<button class="button button-block icon-right ion-chevron-right button-positive" style="width:90%;display:block;margin:0 auto;"> 
    Register 
</button> 

    </body> 
</html> 

JS應用。 js:

var app = angular.module('Humanity', ['ionic']); 
app.controller('main', function ($scope,$state, $ionicModal, $location) { 
var route = angular.module('route', ["ui.router"]); 
app.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('home1', { 
     url: "templates/home1",  
     templateUrl: "templates/test.html" 

    }) 


}); 
$scope.test = function() { 
    $state.go('home1'); 
}; 

}); 

我不知道問題在哪裏,我試圖搜索,沒有找到任何工作的解決方案。我驗證了注射器,我嘗試了$位置。沒有任何工作。

有什麼想法?

+0

嗨..我想你已經忘了PUR在模板可以注入..喜歡: ......或其他類型(取決於您模板和路由 –

回答

0

你忘了放在哪裏模板可注入的指令(UI視圖)..類似:

<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 rel="manifest" href="manifest.json"> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <script src="cordova.js"></script> 
    <script src="js/app.js"></script> 
    </head> 
    <body ng-app="Humanity" ng-controller="main"> 



     <div style="with:100%;"> 
     <img src="img/loginlogo.png" style="display:block;margin:0 auto;"> 
     </div> <br> 
<div class="list"> 
    <label class="item item-input item-floating-label"> 
    <span class="input-label">Email</span> 
    <input type="text" placeholder="First Name"> 
    </label> 
    <label class="item item-input item-floating-label"> 
    <span class="input-label">Password</span> 
    <input type="text" placeholder="Last Name"> 
    </label> 

</div> 
<button ng-click="test();" class="button button-block icon-right ion-chevron-right button-balanced" style="width:90%;display:block;margin:0 auto;"> 
    Sign in 
</button><br> 

<button class="button button-block icon-right ion-chevron-right button-positive" style="width:90%;display:block;margin:0 auto;"> 
    Register 
</button> 

<ui-view></ui-view> <!-- // HERE IS INJECTED YOUR TPL --> 
    </body> 
</html> 
1

嘗試從控制器外部初始化路線如下圖所示。

var app = angular.module('Humanity', ['ionic']); 
 

 
app.config(function($stateProvider, $urlRouterProvider) { 
 

 
    $stateProvider 
 
    .state('home1', { 
 
     url: "templates/home1", 
 
     templateUrl: "templates/test.html" 
 

 
    }) 
 

 

 
}); 
 

 
app.controller('main', function($scope, $state, $ionicModal, $location) { 
 

 
    $scope.test = function() { 
 
    $state.go('home1'); 
 
    }; 
 

 
});