Ui-view content not populated on device after upgrade to 0.9.19


#1

I upgraded to 0.9.19 and noticed that my ui-views are no longer populated on both iOS and Android devices. This took me a few days to notice because everything still works fine in the browser which is where I do most of my development.

My code looks like:

body
  side-menu
    pane
      header
        ...
      ui-view
    ...

In my application’s main controller, I populate the view with something like $state.go('indexState') which works as expected in a desktop Chrome browser.

My devices’ ui-vew areas appear to be only partially populated.

The template that is intended to be inserted into the ui-view:

content(has-header="true", padding="false", scroll="false")
  div.row
     div.col ...
     div.col ...

  div.contentContainer
     slide-box
       slide
       slide
       slide

Once the app is rendered on a device, the ui-view section looks like (taken from weinre):

<ui-view>
  <div class="scroll-content has-header mg-scope hg-isolate-scope" has-header="true" padding="false"></div>
<ui-view>

I’ve tried using the nav-view tag with nested view elements wrapping the content tag in the template above and I’m seeing a very similar result. The view tag is inserted inside of the nav-view tag as expected but content below the content tag is always absent.


#2

Thanks for notifying us, i created an issue and will start working on it immediately:


#3

I have a little more info regarding this issue:

I’ve now upgraded to 0.9.20 and the error still persists. I’ve rewritten the affected pages and removed the content tags in favor of scroll tags. The result is slightly different now.

Firstly, I see a js error during the application bootstrap phase:

Function required as first argument! <div class="scroll" ng-transclude="">

I believe this corresponds to a node that was inserted in place of a content tag that I have at the top level of on of my templates. The rendered DOM code causing this is:

<div class="scroll-content has-header ng-scope ng-isolate-scope" has-header="true" padding="false" scroll="false">

    <div class="scroll" ng-transclude="">

This error does not show up when the application is run inside of a browser. A controller that I have nested in a loaded view below this point in the DOM is never loaded (breakpoints are never triggered) and controllers above this point in the DOM are loaded (breakpoints are triggered) so I assume that this error is halting angular’s progression down the DOM tree for some reason.

There is a slide-box element that is nested inside of this content area (and below the controller that isn’t instantiated) which contains the main content of my pages. The slide-box is being rendered in the DOM without any content inside of it.

<div class="slider-slides" ng-transclude="">            </div>

Anyway, hopefully this helps or sheds some light on something I might be doing wrong.


#4

And I’ve found the solution to my problem. I had registered a bad callback function on document ‘deviceready’ that was causing the error I was seeing in the console. I was not seeing the issue in the browser because the event is never fired.


#5

Thanks for letting us know, @gavares!


#6

Also, we’ve recently added a new platform ready method:

ionic.Platform.ready(function() {
    // this runs when the device is ready
});

Think of it like jQuery’s $(document).ready()

ionic.Platform.ready will run immediately if the device is already ready, and if the device isn’t ready yet it’ll wait until it is then fire off. Hope that helps.