Application working fine in the browser, blank screen on the phone

Question

Application working fine in the browser, blank screen on the phone

I am creating an app using the Ionic Framework, Phonegap and AngularJS.

I have a directive, Item. This directive works just fine when running the application in the browser. However, when running the application compiled on my iPhone 5C with iOS7, the directive is not showing up.

If I copy the HTML template of the directive and drops it onto the page, it works just fine.

Here is the directive:

ItemModule.directive('item', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'E',
        scope: {
            item: '=',
        },

        transclude: true,

        templateUrl: 'js/modules/items/directives/templates/item.html',

        link: function (scope, iElement, iAttrs) {
        }
    };
}])

What am I doing wrong?

javascript
angularjs
cordova
ionic-framework

Answer 1

you say the ajax call is coming successfully, but is it executing correctly?

try right before your directive:

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

    $sceDelegateProvider.resourceUrlWhitelist([
        // Allow same origin resource loads.
        'self',
        // Allow loading from our other assets domain.  Notice there is a difference between * and **.
        'http://km.support.apple.com/**',
    ]);
})

Answer 2

This looks resolution problem. Please check the resolution as per phone device.

There is fixed height/width control on the page which is not allowing to render page on Phone and showing blank screen.

To make your web application responsive, you can use bootstrap as well!!!