错误:无法解析'登录'来自州' app.home'

时间:2016-10-13 13:45:08

标签: angularjs cordova ionic-framework routing

我正在尝试将网站转换为移动应用,但我遇到了问题。我正在使用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;
&#13;
&#13;

但不是我需要的路由,我需要在每个页面上都有滑动菜单,因此菜单需要抽象并随处显示。 有线索吗?谢谢!

2 个答案:

答案 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>