Page not rendering with Data Bindings inside HTML elements


#1

I have the following item detail page, which renders correctly using data from an $http.get request:

<ion-view title="Item">
  <ion-content class="has-header">
    {{item.name}}
    {{item.price}}
    {{item.photos}}
  </ion-content>
</ion-view>

However, if I try to put any of these data bindings inside of html elements (span, div, h1, etc.), the page fails to render:

<ion-view title="Item">
  <ion-content class="has-header">
    <h1>{{item.name}}</h1>
    {{item.price}}
    {{item.photos}}
  </ion-content>
</ion-view>

However, the HTML elements inside of ion-content alone are not the culprit, as the following will render successfully:

<ion-view title="Item">
  <ion-content class="has-header">
    <h1>here</h1>
    {{item.name}}
    {{item.price}}
    {{item.photos}}
  </ion-content>
</ion-view>

Is there some nuance I am missing here?


#2

Can you post a codepen or plunker? Kind of hard to find the issue with just this.


#3

Here is the item controller. I will try to get this info into codepen soon:

.controller('ItemCtrl', function($scope, $http, $stateParams) {

    $scope.item_url = 'http://127.0.0.1:8000/items/' + $stateParams.itemId + '/';
    console.log($scope.item_url);
    
    init = function (){
      $http.get($scope.item_url)
        .success(function(data) {
          console.log(data.name + ' ' + data.description + ' ' + data.price);
          $scope.item = data;
        })
        .error(function(data) {
          alert('error!');
        });
    };

    init();
  
})

#4

I am having trouble getting the codepen set up. Is there enough information here?

I used the ionic sideMenu quickstart application, and the “item detail” page is just the drilled down page to replace the “playlist detail” page.


#5

Mmm, any errors in the console?

Or try this: <h1 ng-bind-html="item.name"></h1>.


#6

This seems to have resolved on its own. I will update if I see the strange behavior again.