Question

我正在建立一个带有离子的移动应用程序。在我的一个移动页面中，有一个图标，点击哪个用户的配置文件需要出现在离子模态窗口内。然后在个人资料中，我还使用Google地图显示用户的工作地点。

所以，问题是当我第一次打开模态时一切正常。但是，一旦关闭模态窗口＆amp;重新打开它，一切正常，除了谷歌地图。

我的浏览器控制台中也没有出现任何错误（使用chrome远程调试）。

然后，再次，如果我杀了应用程序＆amp;重新打开它，它是第一次工作，但不是在其余时间工作。

以下是工作时的截图 -

这是另一个不工作的时候 -

我的模态窗口文件 -

<ion-modal-view>

    <ion-header-bar class="bar bar-header bar-positive">
        <button class="button remove-btn-border" ng-click="closeModal()">
            <i class="icon ion-android-arrow-back"></i>
        </button>
        <h1 class="title">Employee Profile</h1>
    </ion-header-bar>

    <ion-content>
        <div class="list card">

            <div class="item item-avatar">
                <img ng-src="{{baseUrl}}/{{empDetails.Profile_Img}}" >
                <h2>{{empDetails.Emp_Name}}</h2>
            </div>

            <div class="item item-body">

                <div class="item item-divider">
                    <span style='font-weight:bold;'><i class="icon ion-android-call"></i></span>
                    <span style='font-size:13px;'> &nbsp; {{empDetails.Number}}</span>
                </div>
                <div class="item item-text-wrap">
                    <span style='font-weight:bold;'><i class="icon ion-email"></i></span>
                    <span style='font-size:13px;'> &nbsp; {{empDetails.User_Email}}</span>
                </div>
                <div class="item item-divider">
                    <span style='font-weight:bold;'><i class="icon ion-briefcase"></i></span>
                    <span style='font-size:13px;'> &nbsp; {{empDetails.Employment_Type}}/{{empDetails.Employment_Status}}</span>
                </div>
                <div class="item item-text-wrap">
                    <span style='font-weight:bold;'>Designation</span><br>
                    <span style='font-size:13px;'>{{empDetails.Designation_Id}}</span>
                </div>
                <div class="item item-divider item-text-wrap">
                    <span style='font-weight:bold;'>Location</span><br>
                    <span style='font-size:13px;'>{{empDetails.Location_Address}}</span>
                </div>

                <div class="item item-text-wrap" id="map" data-tap-disabled="true">
                    Google map place holder
                </div>
            </div>

            <div class="item tabs tabs-secondary tabs-icon-left" style="background:#F8F8F8;">

                <a class="tab-item" ng-href="tel:{{empDetails.Number}}" style="color:#9E9D9D;">
                    <i class="icon ion-android-call"></i>Call
                </a>

                <a class="tab-item" ng-href="mailto:{{empDetails.User_Email}}" style="color:#9E9D9D;">
                    <i class="icon ion-email"></i>Send email
                </a>
            </div>

        </div>
    </ion-content>

</ion-modal-view>


angular.module('app.HomeController', [])

// Employee Attendance Controller
.controller('HomeController', function($scope, $state, $location, $ionicHistory, $ionicSideMenuDelegate, $ionicModal, $ionicLoading, $cordovaNetwork, $http, $ionicPopup, UserService, GeoAlert){

    console.log('Inside Home Controller');

    var baseUrl=null;

    $scope.openModal = function() {
        $scope.modal.show();
    };

    $scope.closeModal = function() {
        console.log('Clicked on Cancel modal button');
        $scope.modal.hide();
    };

    //Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function() {
        $scope.modal.remove();
    });

    // Execute action on hide modal
    $scope.$on('modal.hidden', function() {
        // Execute action
        $scope.$on('$destroy', function () {
            $scope.map = null;
        });
    });

    // Execute action on remove modal
    $scope.$on('modal.removed', function() {
    // Execute action
    });


    $http.get('js/config.json')
        .then(function(res){
            baseUrl = res.data.server[res.data.mode];
            $scope.baseUrl = baseUrl;
        });


    // Method for showing employee profile page
    $scope.showEmpSelfProfile = function(){
        console.log('Clicked on showEmpSelfProfile icon from Home.js Controller file');

        $ionicModal.fromTemplateUrl('templates/emp-profile/empProfile.html', {
            scope: $scope,
            animation: 'slide-in-up'
        }).then(function(modal) {
            $scope.modal = modal;
            $scope.modal.show();
        });


        // Show spinner animation
        $ionicLoading.show({
            template: '<ion-spinner icon="android"></ion-spinner>'
        });

        // Make ajax call to server for fetching employee details
        var postData = {
                empId:window.localStorage.getItem('user_id'),
                session_id:window.localStorage.getItem('session_id'),
                data_type:'empProfile',
            };

        $http({
            method: 'POST',
            url: baseUrl+'/S/E2Pro_ASL_M_FetchDataSet.php',
            data : postData
        }).then(function successCallback(response) {

            if(response['data']['status'] === 'success'){
                $scope.empDetails = response['data']['data'];
                orgGeoCoordinates = response['data']['data']['Org_GeoCoordinates'];

                // Showing gmap in profile details page
                console.log('orgGeoCoordinates details after ajax call : '+orgGeoCoordinates);

                if(orgGeoCoordinates.lat && orgGeoCoordinates.lng)
                {
                    var myLatlng = new google.maps.LatLng(orgGeoCoordinates.lat, orgGeoCoordinates.lng);

                    var mapOptions = {
                        center: myLatlng,
                        zoom: 20,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);

                    google.maps.event.addListenerOnce($scope.map, 'idle', function () {

                        var marker = new google.maps.Marker({
                            map: $scope.map,
                            animation: google.maps.Animation.DROP,
                            position: myLatlng
                        });
                    });

                    console.log('Google map going to plot');
                }
            }

            if(response['data']['status'] === 'error'){
                if(response['data']['message'] === 'User session dose not exist')
                {
                    UserService.reInitializeSession();
                }
            }

            // Remove loading animation
            $ionicLoading.hide();

        }, function errorCallback(response) {
            // Remove loading animation
            $ionicLoading.hide();
        });


    }

});

我的控制器文件 -

angular.module('app.HomeController', [])

// Employee Attendance Controller
.controller('HomeController', function($scope, $state, $location, $ionicHistory, $ionicSideMenuDelegate, $ionicModal, $ionicLoading, $cordovaNetwork, $http, $ionicPopup, UserService, GeoAlert){

    console.log('Inside Home Controller');

    var baseUrl=null;

    $scope.openModal = function() {
        $scope.modal.show();
    };

    $scope.closeModal = function() {
        console.log('Clicked on Cancel modal button');
        $scope.modal.hide();
    };

    //Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function() {
        $scope.modal.remove();
    });

    // Execute action on hide modal
    $scope.$on('modal.hidden', function() {
        // Execute action
        $scope.$on('$destroy', function () {
            $scope.map = null;
        });
    });

    // Execute action on remove modal
    $scope.$on('modal.removed', function() {
    // Execute action
    });


    $http.get('js/config.json')
        .then(function(res){
            baseUrl = res.data.server[res.data.mode];
            $scope.baseUrl = baseUrl;
        });


    // Method for showing employee profile page
    $scope.showEmpSelfProfile = function(){
        console.log('Clicked on showEmpSelfProfile icon from Home.js Controller file');

        $ionicModal.fromTemplateUrl('templates/emp-profile/empProfile.html', {
            scope: $scope,
            animation: 'slide-in-up'
        }).then(function(modal) {
            $scope.modal = modal;
            $scope.modal.show();
        });


        // Show spinner animation
        $ionicLoading.show({
            template: '<ion-spinner icon="android"></ion-spinner>'
        });

        // Make ajax call to server for fetching employee details
        var postData = {
                empId:window.localStorage.getItem('user_id'),
                session_id:window.localStorage.getItem('session_id'),
                data_type:'empProfile',
            };

        $http({
            method: 'POST',
            url: baseUrl+'/S/E2Pro_ASL_M_FetchDataSet.php',
            data : postData
        }).then(function successCallback(response) {

            if(response['data']['status'] === 'success'){
                $scope.empDetails = response['data']['data'];
                orgGeoCoordinates = response['data']['data']['Org_GeoCoordinates'];

                // Showing gmap in profile details page
                console.log('orgGeoCoordinates details after ajax call : '+orgGeoCoordinates);

                if(orgGeoCoordinates.lat && orgGeoCoordinates.lng)
                {
                    var myLatlng = new google.maps.LatLng(orgGeoCoordinates.lat, orgGeoCoordinates.lng);

                    var mapOptions = {
                        center: myLatlng,
                        zoom: 20,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);

                    google.maps.event.addListenerOnce($scope.map, 'idle', function () {

                        var marker = new google.maps.Marker({
                            map: $scope.map,
                            animation: google.maps.Animation.DROP,
                            position: myLatlng
                        });
                    });

                    console.log('Google map going to plot');
                }
            }

            if(response['data']['status'] === 'error'){
                if(response['data']['message'] === 'User session dose not exist')
                {
                    UserService.reInitializeSession();
                }
            }

            // Remove loading animation
            $ionicLoading.hide();

        }, function errorCallback(response) {
            // Remove loading animation
            $ionicLoading.hide();
        });


    }

});

任何猜测，可能是什么问题。

谷歌地图仅在离子模态中首次使用

0 个答案: