CODEWITHSUNDEEP
angularjsdynamicmodal-dialog
Sh4m
Sh4m

Reputation: 1532

Angularjs Modal - how to set modal content dynamically when modal is open

How to set new value to modal content when modal is open/active?

Here is the sample code.

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log, $timeout) {
    $scope.test = "test variable"
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        test: function () {
          return $scope.test;
        }
      }
    });

$timeout( function(){
            $scope.test = "Hello World!";
        }, 5000 );


};

var ModalInstanceCtrl = function ($scope, $modalInstance, test) {

  $scope.test = test;
  $scope.$watch('test',function (newValue, oldValue) {
    $scope.test = test;
  });
};

In parent controller, i init the modal 1st with "test variable" and after timeout(5 seconds), i want the modal variable change to "Hello World" without close the modal.

can test here

Upvotes: 1

Views: 2299

Answers (2)

gaurav bankoti
gaurav bankoti

Reputation: 224

Use $timeout function inside ModaInstanceCtrl and then change the scope value of variable accordingly. Here is the sample code:

angular.module('plunker', ['ui.bootstrap']);

var ModalDemoCtrl = function ($scope, $modal, $log) {
    $scope.test = "test variable"
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      scope: $scope,
      resolve: {
        test: function () {
          return $scope.test;

        }
      }
    });
};

var ModalInstanceCtrl = function ($scope, $modalInstance, $timeout, test) {

    $timeout(function(){
        $scope.test = "variable" 
    }, 2000);

};

http://plnkr.co/edit/f1zhkWH6aEtZDoKv8egO?p=preview

Upvotes: 4

jitender
jitender

Reputation: 10429

you can directly bind controller scope to modal something like

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      scope: $scope
    });

Here is working plunker

Upvotes: 3

Related Questions