这是我第一次尝试使用ui-router。
这里是我的app.js
angular.module('myApp',['ionic']) .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(); } }); }) .config(function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise("/index.html"); $stateProvider.state('index',{ url: '/' template: "index.html",controller: 'loginCtrl' }); $stateProvider.state('register',{ url: "/register" template: "register.html",controller: 'registerCtrl' }); })
正如你可以看到,我有两个状态。我试图注册状态这样:
<a ui-sref="register"> <button class="button button-balanced"> Create an account </button> </a>
但我得到了
Could not resolve ‘register’ from state ”
例外。这里有什么问题?
这种错误通常意味着,(js)代码的某些部分没有加载。那个在ui-sref里面的状态丢失了。
原文链接:https://www.f2er.com/angularjs/146743.html我不是离子的专家,所以这个例子应该显示它会工作,但我使用了一些技巧(父选项卡)
这是一个有点调整的状态def
.config(function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise("/index.html"); $stateProvider .state('app',{ abstract: true,templateUrl: "tpl.menu.html",}) $stateProvider.state('index',{ url: '/',templateUrl: "tpl.index.html",parent: "app",}); $stateProvider.state('register',{ url: "/register",templateUrl: "tpl.register.html",}); $urlRouterProvider.otherwise('/'); })
<ion-tabs class="tabs-icon-top"> <ion-tab title="Index" icon="icon ion-home" ui-sref="index"> <ion-nav-view name=""></ion-nav-view> </ion-tab> <ion-tab title="Register" icon="icon ion-person" ui-sref="register"> <ion-nav-view name=""></ion-nav-view> </ion-tab> </ion-tabs>
接下来的例子,如何使它运行,以后使用离子框架正确的方法…检查例子here
这里是类似的Q& A有一个使用命名视图(为更好的解决方案)的示例ionic routing issue,shows blank page
在选项卡中使用命名视图改进的版本为:http://plnkr.co/edit/Mj0rUxjLOXhHIelt249K?p=preview
<ion-tab title="Index" icon="icon ion-home" ui-sref="index"> <ion-nav-view name="index"></ion-nav-view> </ion-tab> <ion-tab title="Register" icon="icon ion-person" ui-sref="register"> <ion-nav-view name="register"></ion-nav-view> </ion-tab>
定位命名视图:
$stateProvider.state('index',views: { "index" : { templateUrl: "tpl.index.html" } },views: { "register" : { templateUrl: "tpl.register.html",} },});