我正在尝试将网站转换为移动应用,但我遇到了问题。我正在使用authO
进行第三方身份验证,当我尝试登录我的应用时
错误:无法解析'登录'来自州' app.home'
app.js:
//Ionic Starter App
(function () {
'use strict';
angular
.module('app', ['ionic', 'auth0.lock', 'angular-jwt'])
.config(config);
config.$inject = ['$stateProvider', '$urlRouterProvider', 'lockProvider', 'jwtOptionsProvider'];
function config($stateProvider, $urlRouterProvider, lockProvider, jwtOptionsProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'components/menu/menu.html'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'components/home/home.html'
}
}
})
.state('app.dashboard', {
url: '/dashboard',
views: {
'menuContent': {
templateUrl: 'components/template/template.html'
}
}
})
.state('app.signin', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'components/login/login.html'
}
}
});
$urlRouterProvider.otherwise('/app/home');
lockProvider.init({
clientID: AUTH0_CLIENT_ID,
domain: AUTH0_DOMAIN,
options: {
auth: {
redirect: true,
params: {
scope: 'openid',
device: 'Mobile device'
}
}
}
});
// Configuration for angular-jwt
jwtOptionsProvider.config({
tokenGetter: function() {
return localStorage.getItem('id_token');
},
whiteListedDomains: ['localhost'],
unauthenticatedRedirectPath: '/login'
});
}
})();
如果我有以下路由:
.state('app', {
url: '/',
templateUrl: 'components/menu/menu.html'
})
.state('app.home', {
url : '/home',
templateUrl : 'components/home/home.html'
});
>menu.html:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-royal" align-title="Center">
<ion-nav-title>
<img alt="Company Logo" height="45" src="img/Switch-Logo-top.jpg">
</ion-nav-title>
<!-- Left burger menu button -->
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<!-- Right Log out button -->
<ion-nav-buttons side="right">
<ion-buttons>
<a href="#/app/login" class="button button-outline">
<button class="button" >Log In</button>
</a>
</ion-buttons>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<!-- Left burger menu -->
<ion-side-menu class="menu" side="left">
<ion-header-bar class="bar-royal">
<h1 class="title">Make Your Switch</h1>
</ion-header-bar>
<ion-content ng-controller="menuController">
<ion-list>
<ion-item ng-repeat="todo in todos" menu-close href="#/app/dashboard">
<div class="item-content" ng-click="clicked(todo.url)">
{{todo.title}}
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
&#13;
但不是我需要的路由,我需要在每个页面上都有滑动菜单,因此菜单需要抽象并随处显示。 有线索吗?谢谢!
答案 0 :(得分:1)
好的,问题出在路由中,在home.controller.js中我有一个state.go(登录),但在app.js我没有匹配。更新了状态,现在可以正常工作。
答案 1 :(得分:0)
我相信您的问题可能是您的menu.html缺少ui-view
指令。
子状态会将其模板加载到其父级的ui视图中。 [https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views]
因此,您的子视图app.home
将期望其父app
的模板menu.html
在其HTML中的某个位置<div ui-view></div>
。