Question

我试图根据本教程Coenraets fb tutorial为我的离子应用实现facebook登录，但我遇到了一些问题。

我在我的应用程序中使用选项卡，但是当我尝试将用户重定向到登录页面（选项卡）时，如果他们没有登录，则登录页面显示为空白（导航栏仍然位于顶部）。如果我刷新页面，则登录页面会正确显示。我知道它至少是尝试重定向页面，因为我无法转到其他选项卡，只是总是这个空白的登录选项卡。这是我声明我的标签的地方：

.config(function($stateProvider, $urlRouterProvider) {
   $stateProvider
     //setup an abstract state for the tabs directive
     .state('tab', {
       url: "/tab",
       abstract: true,
       templateUrl: "templates/tabs.html"
     })
     .state('tab.login', {
       url: '/login',
       views: {
         'tab-login': {
           templateUrl: 'templates/tab-login.html',
           controller: 'AppCtrl'
         }
       }
     })
     //example of another state 
     .state('tab.map', {
       url: '/map',
       views: {
         'tab-map': {
           templateUrl: 'templates/tab-map.html',
           controller: 'MapController'
         }
       }
     })

以下是我的登录标签HTML的样子：

<ion-view title="Login" name="tab-login" hide-back-button="true" style="background: #1b5a83" hide-nav-bar="true">
<ion-content has-header="true" padding="true" ng-controller="AppCtrl">
    <div class="list list-inset"  style="background: #1b5a83">
        <div class="item item-image" style="border:none;margin-top:50px;">
            <img src="img/sociogram.jpg"/>
        </div>
        <button class="button button-block button-light" ng-click="facebookLogin()">
            <i class="icon ion-social-facebook"></i>
            &nbsp;Login with Facebook
        </button>
    </div>
</ion-content>

这里我的重定向发生在.run函数中：

.run(function($rootScope, $state, $ionicPlatform, $window, OpenFB) {
 OpenFB.init(fbappid, 'http://localhost:8100/oauthcallback.html', window.sessionStorage);

  $ionicPlatform.ready(function() {
  $rootScope.$on('$stateChangeStart', function(event, toState) {
        if (toState.name !== "tab.login" && toState.name !== "tab.logout" && !$window.sessionStorage['fbtoken']) {
            $state.go('tab.login');
            event.preventDefault();
        }
    });

    $rootScope.$on('OAuthException', function() {
        $state.go('tab.login');
    });
})

我出错的任何想法???感谢

Answer 1

确保templates/tabs.html中的<ion-nav-view>名为<ion-nav-view name="tab-login">，因为在您的州＆＃39; tab.login＆＃39;您告诉UI路由器查找名称为＆＃39; tab-login＆＃39;的视图占位符。所以你需要在你的模板中定义它：

<ion-nav-view>

或者您将状态定义更改为使用空的视图名称，因此它会在父状态＆＃39;标签中引用您未命名的.state('tab.login', { url: '/login', views: { '': { templateUrl: 'templates/tab-login.html', controller: 'AppCtrl' } } })：

{{1}}

在您的链接示例中，所有州都只有一个命名视图，请参阅https://github.com/ccoenraets/sociogram-angular-ionic/blob/master/www/templates/menu.html#L7

在这里查看UI路由器中的多个嵌套视图：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

离子/角度$ state.go在变化时给出空白屏幕

1 个答案: