jablesauce jablesauce - 3 months ago 34
AngularJS Question

Angular expression not evaluating properly in Ionic popup

I am trying to display data from a JSON object that is within a controller's scope. This would happen within a function that calls an Ionic popup. What I am trying to do is display this data in a template that would be used to build the popup itself. The below function dwells within the controller:

this.showAlert = function(i) {

this.pref = [{
label: "Foo",
addr_l1: "Bar",
addr_l2: "Baz",
locality: "Pez"
}];

var popUp = '<p>dcd{{pickupCtrl.pref[' + i + '].addr_l1}}</p>' +
'<p>{{pickupCtrl.pref[' + i + '].addr_l2}}</p>' +
'<p>{{pickupCtrl.pref[' + i + '].locality}}</p>';

var alertPopup = $ionicPopup.alert({
title: this.pref[i].label,
template: popUp,
buttons: [{
text: 'Cancel'
}, {
text: '<b>OK</b>',
type: 'button-positive',
onTap: function(e) {
// add choice
}
}, ]

});


}

For some reason, the template is not displaying the Angular expression, but it does display the "dcd" text I added as a test. This means that there is something wrong in the way I am calling the expression itself.

How should I specify the variable within the template so that it properly displays?

Answer

The main problem was that I forgot to add scope: $scope as part of the parameters for the Ionic Popup. Basically from:

title: this.pref[i].label,
template: popUp,
buttons: [{
  text: 'Cancel'
}, {
  text: '<b>OK</b>',
  type: 'button-positive',
  onTap: function(e) {
    // add choice
  }
}, ]

to this:

title: this.pref[i].label,
template: popUp,
scope: $scope, // ADD THIS
buttons: [{
  text: 'Cancel'
}, {
  text: '<b>OK</b>',
  type: 'button-positive',
  onTap: function(e) {
    // add choice
  }
}, ]