主屏幕代码 - Html

Question

我有一个使用离子构建的移动应用程序屏幕。下图显示了该屏幕。

点击手机主屏幕中的联系人按钮后，它只会加载一个白色的空白屏幕。但是，当我通过浏览器运行应用程序时它正在显示。上述屏幕的代码和主屏幕的代码如下。请让我知道我哪里出错了。我对离子框架很新。

感谢。

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

主屏幕代码 - 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>

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

我的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();
            }                           
        });      

    });

Answer 1

几周前，我在我的iPad上托管SalesForce内部的SPA（angualar.js，BootStrap）遇到了类似的问题，但我的桌面上却没有。左外有时，点击一个按钮或做一些空白（白色）屏幕完成的事情......
我不确定它是否与你的问题相同，但经过一些测试/研究后，我发现问题是由一个 div 元素（填充了ng-repeat）触发的主要 div 内的高度大于屏幕高度，高度和宽度设置为100％（谷歌地图）。

要恢复，当ng-repeat返回大量项目时，容器div增长超出主 div

Ionic Page未加载

主屏幕代码 - Html

单击联系人大按钮

我的application.js如下

1 个答案: