Javascript Ionic google地图未加载具有firebase身份验证的视图_Javascript_Angularjs_Google Maps_Ionic Framework_Firebase Authentication

Javascript Ionic google地图未加载具有firebase身份验证的视图

javascript angularjs google-maps ionic-framework

Javascript Ionic google地图未加载具有firebase身份验证的视图,javascript,angularjs,google-maps,ionic-framework,firebase-authentication,Javascript,Angularjs,Google Maps,Ionic Framework,Firebase Authentication,我的ionic 1项目目前具有firebase身份验证，允许用户使用电子邮件和密码登录，并将用户重定向到只有在用户登录时才能访问的视图我想在登录视图中加载谷歌地图。我已经成功地将google maps加载到另一个在其控制器中没有firebase身份验证的视图中，但当我在登录视图的控制器中放入相同的代码并在登录视图中设置div时，它就不会加载。控制台中并没有错误，所以我不太确定发生了什么因此，代码如下所示： AuthService调用firebase服务 MuserController（登录视

我的ionic 1项目目前具有firebase身份验证，允许用户使用电子邮件和密码登录，并将用户重定向到只有在用户登录时才能访问的视图

我想在登录视图中加载谷歌地图。我已经成功地将google maps加载到另一个在其控制器中没有firebase身份验证的视图中，但当我在登录视图的控制器中放入相同的代码并在登录视图中设置div时，它就不会加载。控制台中并没有错误，所以我不太确定发生了什么

因此，代码如下所示： AuthService调用firebase服务

MuserController（登录视图的控制器）：

Services.js（Firebase身份验证服务）：

index.html

    <!DOCTYPE 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 href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="lib/ion-md-input/css/ion-md-input.min.css" rel="stylesheet">
    <link href="lib/ionic-material/dist/ionic.material.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/geomuse.css" rel="stylesheet">
    <link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic-material/dist/ionic.material.min.js"></script>
    <script src="lib/ion-md-input/js/ion-md-input.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!--Googple maps plugin-->
    <script src="http://maps.google.com/maps/api/js?key=AIzaSyAq9weEMgdVahLcdbvokguOZDuZ3PVVyig&sensor=true"></script>

    <!--Firebase-->
    <script src="lib/firebase/firebase.js"></script>
    <script src="lib/angularfire/dist/angularfire.min.js"></script>


    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>



</head>
<body ng-app="starter">
    <ion-nav-view></ion-nav-view>
</body>
</html>

muser.html（登录视图）：

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'ionic-material', 'ionMdInput', 'ngCordova', 'firebase', 'socialAuth'])

.run(function($ionicPlatform, $state, AuthService, $rootScope) {
    $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) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }

        AuthService.userIsLoggedIn().then(function(response)
        {
            if(response === true)
            {
                $state.go('app.muser');
            }
            else
            {
                $state.go('auth.connect');
            }
        });

        // 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);
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });

    // UI Router Authentication Check
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
        if (toState.data.authenticate)
        {
            AuthService.userIsLoggedIn().then(function(response)
            {
                if(response === false)
                {
                    event.preventDefault();
                    $state.go('auth.connect');
                }
            });
        }
    });
})

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

    // Turn off caching for demo simplicity's sake
    $ionicConfigProvider.views.maxCache(0);

    /*
    // Turn off back button text
    $ionicConfigProvider.backButton.previousTitleText(false);
    */

    $stateProvider.state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html',
        controller: 'AppCtrl'
    })

    .state('app.activity', {
        url: '/activity',
        views: {
            'menuContent': {
                templateUrl: 'templates/activity.html',
                controller: 'ActivityCtrl'
            },
            'fabContent': {
                template: '<button id="fab-activity" class="button button-fab button-fab-top-right expanded button-energized-900 flap"><i class="icon ion-paper-airplane"></i></button>',
                controller: function ($timeout) {
                    $timeout(function () {
                        document.getElementById('fab-activity').classList.toggle('on');
                    }, 200);
                }
            }
        }
    })


    .state('app.register', {
        url: '/register',
        views: {
            'menuContent': {
                templateUrl: 'templates/register.html',
                controller: 'ConnectCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })


    .state('app.register-email', {
        url: '/register-email',
        views: {
            'menuContent': {
                templateUrl: 'templates/register-email.html',
                controller: 'SignUpCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })

    .state('app.login', {
        url: '/login',
        views: {
            'menuContent': {
                templateUrl: 'templates/login.html',
                controller: 'ConnectCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })

    .state('app.forget-password', {
        url: '/forget-password',
        views: {
            'menuContent': {
                templateUrl: 'templates/forget-password.html',
                controller: 'ForgetPasswordCtrl'
            },
            'fabContent': {
                template: ''
            }
        }
    })

    .state('app.signup', {
        url: '/signup',
        views: {
            'menuContent': {
                templateUrl: 'templates/auth/sign-up.html',
                controller: 'SignUpCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })

    .state('app.connect', {
        url: '/connect',
        views: {
            'menuContent': {
                templateUrl: 'templates/auth/connect.html',
                controller: 'ConnectCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })


    .state('app.muser', {
        url: '/muser',
        views: {
            'menuContent': {
                templateUrl: 'templates/app/muser.html',
                controller: 'MuserCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/start');
});

angular.module（'starter'，['ionic'，'starter.controllers'，'ionic material'，'ionMdInput'，'ngCordova'，'firebase'，'socialAuth']））
.run（函数（$ionicPlatform、$state、AuthService、$rootScope）{
$ionicPlatform.ready（函数（）{
//默认情况下隐藏附件栏（删除此选项可在键盘上方显示附件栏）
//表格输入）
if（window.cordova&&window.cordova.plugins.Keyboard）{
插件键盘hideKeyboardAccessoryBar（真）；
}
如果（窗口状态栏）{
//需要org.apache.cordova.statusbar
StatusBar.styleDefault（）；
}
AuthService.userIsLoggedIn（）.then（函数（响应）
{
如果（响应===true）
{
$state.go（'app.muser'）；
}
其他的
{
$state.go（'auth.connect'）；
}
});
//默认情况下隐藏附件栏（删除此选项可在键盘上方显示附件栏）
//表格输入）
if（window.cordova&&window.cordova.plugins.Keyboard）{
插件键盘hideKeyboardAccessoryBar（真）；
插件。键盘。禁用滚动（真）；
}
如果（窗口状态栏）{
//需要org.apache.cordova.statusbar
StatusBar.styleDefault（）；
}
});
//路由器身份验证检查
$rootScope.$on（“$stateChangeStart”），函数（事件、toState、toParams、fromState、fromParams）{
if（toState.data.authenticate）
{
AuthService.userIsLoggedIn（）.then（函数（响应）
{
如果（响应===false）
{
event.preventDefault（）；
$state.go（'auth.connect'）；
}
});
}
});
})
.config（函数（$stateProvider、$urlRouterProvider、$ionicConfigProvider）{
//为了演示的简单性，请关闭缓存
$ionicConfigProvider.views.maxCache（0）；
/*
//关闭后退按钮文本
$ionicConfigProvider.backButton.previousTitleText（false）；
*/
$stateProvider.state（'app'{
url:“/app”，
摘要：没错，
templateUrl:'templates/menu.html'，
控制器：“AppCtrl”
})
.state（'应用程序活动'{
url:“/activity”，
观点：{
“菜单内容”：{
templateUrl:'templates/activity.html'，
控制器：“ActivityCtrl”
},
“fabContent”：{
模板：“”，
控制器：函数（$timeout）{
$timeout（函数（）{
document.getElementById（'fab-activity'）.classList.toggle（'on'）；
}, 200);
}
}
}
})
.state（'app.register'{
url:“/register”，
观点：{
“菜单内容”：{
templateUrl:'templates/register.html'，
控制器：“ConnectCtrl”
},
“fabContent”：{
模板：“”
}
},
数据：{
验证：false
}
})
.state（'应用程序注册电子邮件'{
url:“/注册电子邮件”，
观点：{
“菜单内容”：{
templateUrl:'templates/register email.html'，
控制器：“SignUpCtrl”
},
“fabContent”：{
模板：“”
}
},
数据：{
验证：false
}
})
.state（'app.login'{
url:“/login”，
观点：{
“菜单内容”：{
templateUrl:'templates/login.html'，
控制器：“ConnectCtrl”
},
“fabContent”：{
模板：“”
}
},
数据：{
验证：false
}
})
.state（'应用程序忘记密码'{
url:“/忘记密码”，
观点：{
“菜单内容”：{
templateUrl:'templates/forget password.html'，
控制器：“ForgetPasswordCtrl”
},
“fabContent”：{
模板：“”
}
}
})
.state（'应用程序注册'{
url:“/signup”，
观点：{
“菜单内容”：{
templateUrl:'templates/auth/sign-up.html'，
控制器：“SignUpCtrl”
},
“fabContent”：{
模板：“”
}
},
数据：{
验证：false
}
})
.state（'app.connect'{
url:“/connect”，
观点：{
“菜单内容”：{
templateUrl:'templates/auth/connect.html'，
控制器：“ConnectCtrl”
},
“fabContent”：{
模板：“”
}
    <!DOCTYPE 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 href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="lib/ion-md-input/css/ion-md-input.min.css" rel="stylesheet">
    <link href="lib/ionic-material/dist/ionic.material.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/geomuse.css" rel="stylesheet">
    <link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic-material/dist/ionic.material.min.js"></script>
    <script src="lib/ion-md-input/js/ion-md-input.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!--Googple maps plugin-->
    <script src="http://maps.google.com/maps/api/js?key=AIzaSyAq9weEMgdVahLcdbvokguOZDuZ3PVVyig&sensor=true"></script>

    <!--Firebase-->
    <script src="lib/firebase/firebase.js"></script>
    <script src="lib/angularfire/dist/angularfire.min.js"></script>


    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>



</head>
<body ng-app="starter">
    <ion-nav-view></ion-nav-view>
</body>
</html>

<ion-view view-title="Login" align-title="left">
    <ion-content>
        <div id="map"></div>
    </ion-content>
</ion-view>

angular.module('starter', ['ionic', 'starter.controllers', 'ionic-material', 'ionMdInput', 'ngCordova', 'firebase', 'socialAuth'])

.run(function($ionicPlatform, $state, AuthService, $rootScope) {
    $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) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }

        AuthService.userIsLoggedIn().then(function(response)
        {
            if(response === true)
            {
                $state.go('app.muser');
            }
            else
            {
                $state.go('auth.connect');
            }
        });

        // 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);
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });

    // UI Router Authentication Check
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
        if (toState.data.authenticate)
        {
            AuthService.userIsLoggedIn().then(function(response)
            {
                if(response === false)
                {
                    event.preventDefault();
                    $state.go('auth.connect');
                }
            });
        }
    });
})

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

    // Turn off caching for demo simplicity's sake
    $ionicConfigProvider.views.maxCache(0);

    /*
    // Turn off back button text
    $ionicConfigProvider.backButton.previousTitleText(false);
    */

    $stateProvider.state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html',
        controller: 'AppCtrl'
    })

    .state('app.activity', {
        url: '/activity',
        views: {
            'menuContent': {
                templateUrl: 'templates/activity.html',
                controller: 'ActivityCtrl'
            },
            'fabContent': {
                template: '<button id="fab-activity" class="button button-fab button-fab-top-right expanded button-energized-900 flap"><i class="icon ion-paper-airplane"></i></button>',
                controller: function ($timeout) {
                    $timeout(function () {
                        document.getElementById('fab-activity').classList.toggle('on');
                    }, 200);
                }
            }
        }
    })


    .state('app.register', {
        url: '/register',
        views: {
            'menuContent': {
                templateUrl: 'templates/register.html',
                controller: 'ConnectCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })


    .state('app.register-email', {
        url: '/register-email',
        views: {
            'menuContent': {
                templateUrl: 'templates/register-email.html',
                controller: 'SignUpCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })

    .state('app.login', {
        url: '/login',
        views: {
            'menuContent': {
                templateUrl: 'templates/login.html',
                controller: 'ConnectCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })

    .state('app.forget-password', {
        url: '/forget-password',
        views: {
            'menuContent': {
                templateUrl: 'templates/forget-password.html',
                controller: 'ForgetPasswordCtrl'
            },
            'fabContent': {
                template: ''
            }
        }
    })

    .state('app.signup', {
        url: '/signup',
        views: {
            'menuContent': {
                templateUrl: 'templates/auth/sign-up.html',
                controller: 'SignUpCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })

    .state('app.connect', {
        url: '/connect',
        views: {
            'menuContent': {
                templateUrl: 'templates/auth/connect.html',
                controller: 'ConnectCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })


    .state('app.muser', {
        url: '/muser',
        views: {
            'menuContent': {
                templateUrl: 'templates/app/muser.html',
                controller: 'MuserCtrl'
            },
            'fabContent': {
                template: ''
            }
        },
        data: {
            authenticate: false
        }
    })
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/start');
});