We help IT Professionals succeed at work.

Help with AngularJS Modal

JElster
JElster asked
on
Hi..
I have a controller that opens a modal window.
How can I change the templateUrl value when the modal window is opened?

  $ionicModal.fromTemplateUrl('modal-details.html', {
       scope: $scope,
        animation: 'slide-in-up',
        hardwareBackButtonClose: true
    }).then(function (modal) {
        $scope.modal = modal;
    });


// Open window here..

    $scope.openModal = function(selected){

       // How can I change the templateUrl based on the selected value?
     

        $scope.data.selected = selected;
Comment
Watch Question

Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
you might try something like this, though I have not actually tested it.

in the controller:
var self = this;
var templateurl = 'default-template'

$ionicModal.fromTemplateUrl(templateurl+'.html', { // so we don't mix dot notation with bracket notation
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    self[templateurl] = modal; // creates a modal object on the this context with the same name as the template
  });

  $scope.openModal = function(templateurl) {
    self[templateurl].show();
  };

Open in new window



in the view:

  <a ng-click="openModal('my-custom-template')">Open my custom template</a>

Open in new window

Author

Commented:
I get
 
JavaScript runtime error: Unable to get property 'show' of undefined or null reference

at

 self[templateurl].show();

any ideas ?

thx
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
yeah.. i thought that might happen. it's too late. the modal is alteady initialized with the default template. if you want to test my theory you could set the default templare variable to the same one that you pass in the click function. if it works, then my theory is correct, otherwise something else is screwey and i'd have to set up an app to test it.

unfortunately it doesn't appear that ionic modal service has the capabilty of specifying a template at run time
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
you could also try having separate instances of the ionic modal that use different templates. in the .then function set $scope.anotherModal = modal

then, do

$scope.anotherModal.show()

does that make sense? (typing on phone)

Author

Commented:
Yes.. I'll try that
thx
Data Scientist
Most Valuable Expert 2014
Commented:
Scrap the above suggestions. This should work. Since you are executing the function at run time, instead of upon initialization of the controller.

$scope.showModal = showModal;

function showModal(template){
	$ionicModal.fromTemplateUrl(template, {
        scope: $scope,
        animation: 'slide-in-up',
        hardwareBackButtonClose: true
    }).then(function (modal) {
        modal.show()
    });
}

Open in new window


 <a ng-click="showModal('path/to/template.html')">Open my custom template</a>

Open in new window

Author

Commented:
thx!
that worked!
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
cool :)