Ионная страница не загружается

0

У меня есть экран мобильного приложения, который построен с ионной. На следующем рисунке показан экран для этого. Изображение 174551

Как только я нажал кнопку контактов на главном экране мобильного устройства, он загрузит только белый пустой экран. Но когда я запускаю приложение через браузер, он показывает. Код для вышеуказанного экрана и код для главного экрана следующие. Пожалуйста, дайте мне знать, где я ошибся. Я очень новичок в ионной структуре.

Благодарю.

=============================

Код для главного экрана - Html

<ion-content id="homeContent" scroll="false" class="padding">
    <div class="row">
        <span class="text-center blackBold">Menu</span>
        <a href="/#/logout" class="blackBold" style="float: right;">Logout</a>
    </div>
    <div class="row" id="buttonsFirstWrapper">
        <div class="col col-50"><a href="/#/contacts"><img src="http://commercepromote.com/mobile-app/contacts_btn.png" /></a></div>
        <div class="col col-50"><a href="javascript:void(0);"><img src="http://commercepromote.com/mobile-app/groups_btn.png" /></a></div>
    </div>
    <div class="row">
        <div class="col col-50"><a href="javascript:void(0);"><img src="http://commercepromote.com/mobile-app/de_duplication_btn.png" /></a></div>
        <div class="col col-50"><a href="javascript:void(0);"><img src="http://commercepromote.com/mobile-app/import_btn.png" /></a></div>
    </div>
    <div class="row">
        <div class="col col-50"><a href="javascript:void(0);"><img src="http://commercepromote.com/mobile-app/export_btn.png" /></a></div>
        <div class="col col-50"><a href="javascript:void(0);"><img src="http://commercepromote.com/mobile-app/configuration_btn.png" /></a></div>
    </div>
</ion-content>

========================

Код для внутреннего экрана, который загружается один раз, нажимает на большую кнопку контактов

<ion-content id="homeContent" scroll="false" class="padding">
    <ion-tabs class="tabs-icon-top tabs-color-active-positive">      
      <ion-tab title="New Contact" icon-off="ion-person-add" icon-on="ion-person-add" href="#/contacts">
        <ion-nav-view name="tab-chats">
            <div class="row">
                <a href="#/" class="blackBold" style="float: left;">Home</a>
                <span class="text-center blackBold">New Contact</span>
                <a href="/#/logout" class="blackBold" style="float: right; margin-right: 30px;">Logout</a>
            </div>
            <div id="createContact" class="list">
                <label class="item item-input item-floating-label">
                    <span class="input-label">First name</span>
                    <input type="text" placeholder="First name">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label">Last Name</span>
                    <input type="text" placeholder="Last Name">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label">Preferred Name</span>
                    <input type="text" placeholder="Preferred Name">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label">NRIC</span>
                    <input type="text" placeholder="NRIC">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label">Phone</span>
                    <input type="tel" placeholder="Phone">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label">Mobile</span>
                    <input type="tel" placeholder="Mobile">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label">Email</span>
                    <input type="email" placeholder="Email">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label">Block/House No:</span>
                    <input type="text" placeholder="Block/House No:">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label">Unit No:</span>
                    <input type="text" placeholder="Unit No:">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label">Street Name</span>
                    <input type="text" placeholder="Street Name">
                </label>
                <label class="item item-input item-floating-label">
                    <span class="input-label">Postal Code</span>
                    <input type="text" placeholder="Postal Code">
                </label>
                <label class="item item-input" style="height: 40px;">
                    <span class="input-label">Country</span>
                    <select 
                            style="width: 100%; max-width: 100%; height: 40px;"
                            ng-model="engineer.currentActivity"
                            data-ng-options="cL.countryCode as cL.countryName for cL in CountryList">                        
                    </select>
                </label>
            </div>
            <div id="loginBtnWrapper" class="col text-center">
                <button style="margin-top: -15px" id="loginBtn" class="button button-positive">Create</button>
            </div>        
        </ion-nav-view>
      </ion-tab>    
      <ion-tab title="List Contacts" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/contacts">
        <ion-nav-view name="tab-dash">
            <div class="row">
                <a href="#/" class="blackBold" style="float: left;">Home</a>
                <span class="text-center blackBold">Contacts</span>
                <a href="/#/logout" class="blackBold" style="float: right; margin-right: 30px;">Logout</a>
            </div>
            <div id="contactListing" class="list">
                <div ng-repeat="eachContact in AllContacts" class="item item-button-right">
                    <a href="#/contact-details"><h2 class="blackBold">{{ eachContact.FNM }}</h2></a>
                    <p class="blackBold">{{ eachContact.EML }}</p>
                    <p class="blackBold">{{ (eachContact.PNM != "" ? '(' + eachContact.PNM + ')' : "") }}</p>           
                    <a href="tel:+{{ eachContact.MBL }}" class="button button-positive">Call</a>
                </div>     
            </div>        
        </ion-nav-view>
      </ion-tab>            
    </ion-tabs>    
</ion-content>

===========================================

My application.js выглядит следующим образом

angular.module('XXXXXXXXXX', ['ionic'])

    .run(function($ionicPlatform) {
        $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 && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleLightContent();
            }
        });
    })

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

        $stateProvider   
            .state('login', {
                url: '/login',
                templateUrl: 'templates/login.html',
                controller: 'LoginCtrl'
            })
            .state('home', {
                url: '/',
                templateUrl: 'templates/home.html',
                controller: 'HomeCtrl'
            })
            .state('contacts', {
                url: '/contacts',                
                templateUrl: 'templates/contacts.html',
                controller: 'ContactsCtrl'
            })
            .state('contact-details', {
                url: '/contact-details',                
                templateUrl: 'templates/contact-details.html',
                controller: 'ContactDetailsCtrl'
            })            
            .state('logout', {
                url: '/logout',
                templateUrl: 'templates/login.html',
                controller: 'LoginCtrl'
            });            


        $urlRouterProvider.otherwise("/");

    })

    .controller('HomeCtrl', function($scope, $http, $state, $ionicPopup, AuthService) {        

        AuthService.isLoggedIn('home');

    })

    .controller('ContactsCtrl', function($scope, $http, $state, $ionicPopup, AuthService, CommonServices, $ionicLoading) {        

        var contactList = null, 
                tempStr = "",
                jsonStr;
        $scope.AllContacts = [];
        $scope.CountryList = [];

        AuthService.isLoggedIn('contacts');        
        $scope.CountryList = CommonServices.retrieveCountryList(); 

        $ionicLoading.show();

        $http.get('SERVICE_CALL').success(function(data) {                
            tempStr = data.substr(8880, data.length);               
            jsonStr = JSON.parse(tempStr);
            if (jsonStr.Contacts.length > 0){                   
                angular.forEach(jsonStr.Contacts, function (obj) {
                    if ((typeof obj.FNM != "undefined") && (obj.FNM != null) && (obj.FNM != "")){
                        $scope.AllContacts.push(obj);
                    }
                });                
                $ionicLoading.hide();
            }                           
        });      

    });
Теги:
ionic

1 ответ

0

Несколько недель назад у меня была аналогичная проблема с моим SPA (angualar.js, BootStrap), размещенным внутри SalesForce, на моем iPad, но не на моем рабочем столе.

Иногда, нажимая на кнопку или делая что-то законченное пустым (белым) экраном...
Я не уверен, что это та же проблема, что и ваша, но после некоторых тестов/исследований я обнаружил, что проблема была вызвана наличием элемента div (заполненного ng-повторением) с высотой, превышающей высоту экрана внутри главный div с высотой и шириной, установленный как 100% (карты Google).

Чтобы возобновить, когда ng-repeat вернется к большому количеству предметов, контейнер div растет за пределами основного div

Ещё вопросы

Сообщество Overcoder
Наверх
Меню