WhatisSober WhatisSober - 9 months ago 30
AngularJS Question

Change the template of a modal from within the modal in angular

I open a modal like this:

<a href="#" ng-click="showLogin()">Sign in</a>


Login Function

$scope.showLogin= function() {
var modalInstance = $uibModal.open({
templateUrl: 'partials/login.html',
controller: 'modalController',
})
};


ModalController (generic)

angular.module('app.controllers')
.controller("modalController", function($scope, $uibModalInstance) {

$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};

});


Login.html

<form>
</form>
<a href="#" ng-click="showSignup()">Sign up</a>


When signup is clicked, I can open the sign up modal. Here is the plunkr: http://plnkr.co/edit/mR3nXYo1rm4ey5Buc9Q0?p=preview

My question is, Is it possible to just swap the template? When Signup is clicked I want to change the template from register.html.

Answer Source

Sure. Just use

<div ng-if="model.modalType === 'login'">
  <form>
  </form>
  <a href="#" ng-click="model.modalType = 'signup'">Sign up</a>
</div>
<div ng-if="model.modalType === 'signup'">
  ...
</div>

And in your controller:

$scope.model = {
  modalType: 'login'
};