Angularjs How to communicate between two modals

Question

What I am trying to do here is:

Type in the new language name and click "Add" button, the new language will be added into the existing object.

For example: the existing object: {"default": "English"}, When I type in "German", a new object is added like this: {"default": "English", "German": "German"}

Here is my PLUNKER.

Could someone help me on that? Thanks so much, I will appreciate!

score 2 · Answer 1 · answered Apr 03 '14 at 22:54

2

You need to use a service, by definition singletons, and inject it in both models, adding a watch to the array in the service and updating accordingly in the scope of every model, from the values in the service.

answered Apr 03 '14 at 22:54

pedromarce

5,651
2
27
27

thanks for your reply, could you give me an example on that? thanks a lot! – Justin Apr 03 '14 at 22:55
http://stackoverflow.com/questions/21919962/angular-share-data-between-controllers here is an example – pedromarce Apr 03 '14 at 22:58
hi, could you help me to check again, I updated the service, but still have some problem – Justin Apr 03 '14 at 23:18

Kath · Accepted Answer · 2014-04-04T00:09:35.843

I would prefer to use events. Just subscribe one piece on some event like:

$rootScope.$on('myEvent', function(event, info){
// do something
});

And another one will fire it:

scope.$broadcast('myEvent', info);

The system glitched when I was trying to save your plunkr or I don't have a permission so here the code:

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

    app.factory('Data', function(){
      var data = 
        {
          Language: ''
        };

      return {
        setLanguage: function(language) {
          data.Language = language;
        }
      }
    })

    var ModalDemoCtrl = function ($scope, $modal, $log) {


      $scope.languages = {"sch": "Simple Chinese"};
      $scope.$on('newLanguageAdded', function(e, lang){
           $scope.languages[lang] = lang;

     });

      $scope.open = function () {

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

      };
    };

    // Please note that $modalInstance represents a modal window (instance) dependency.
    // It is not the same as the $modal service used above.

    var ModalInstanceCtrl = function ($scope, $modal, $modalInstance, languages, newLanguage) {

      $scope.languages = languages;

      $scope.ok = function () {

        $modalInstance.close($scope.languages);

      };

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

      $scope.openDialog = function () {
        var modalInstance = $modal.open({
          templateUrl: 'addNewLanguageDialog.html',
          controller: AddNewLanguageCtrl,
        });
      }

    var AddNewLanguageCtrl = function ($scope, $rootScope, $modalInstance, Data){
        $scope.newValue = {text: ''};

        $scope.$watch('newLanguage', function(newValue) {
          if(newValue) Data.setLanguage(newValue);
        }); 

        $scope.add = function () {
          alert($scope.newValue.text);
          $rootScope.$broadcast('newLanguageAdded', $scope.newValue.text);
          $modalInstance.close($scope.languages);  
        }

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




    };

You can just copy this piece into plunkr instead yours. Also change the layout:

<div class="modal-body">
            <input ng-model="newValue.text">
        </div>

Let me know if something doesn't work

hi, i am not quite understand, could you update the plunker and show me the code? — Justin, Apr 03 '14 at 23:19
thanks! it looks nice! is it possible to make the language as an object, rather than an array — Justin, Apr 04 '14 at 00:02

ryeballar · Answer 3 · 2014-04-04T00:41:30.663

An angular-ui way to achieve what you need would be to use these two basic methodologies found in the angular-ui documentation. See associated plunker for the answer below.

First is to use the close(result) inside the Instance Controller of the modal which updates the result promise property of the Instance Controller

Second is to use the result promise property to get the result(s) passed on to the close() method

Inside The AddNewLanguageCtrl is something like this

$scope.data = {newLanguage: ""};

$scope.add = function() {
  $scope.close(data.newLanguage);
};

Inside the your addNewLanguageDialog.html script template instead of using

<input ng-model="newLanguage">

use this

<input ng-model="data.newLanguage">

This is because whenever a modal is created, a new scope is created under the $rootScope(default) if a scope is not passed on to the options when the $modal.open() is invoked as stated in the angular-ui documentation. If you use newLanguage as the model then it won't receive any updates inside the AddNewLanguageCtrl. You can read this to get a better understanding of what I'm talking about regarding scopes

Inside the first modal ModalInstanceCtrl is something like this

  $scope.newLanguages = [];

  $scope.openDialog = function () {
    var modalInstance = $modal.open({
      templateUrl: 'addNewLanguageDialog.html',
      controller: AddNewLanguageCtrl,
    });

    modalInstance.result.then(function(newLanguage) {
      if(newLanguage)
        $scope.newLanguages.push(newLanguage);
    });

  };

And then in your ModalDemoCtrl

$scope.languages = [];

  $scope.open = function () {

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

    modalInstance.result.then(function(languages) {
        $scope.languages = $scope.languages.concat(languages);
    });

  };

Angularjs How to communicate between two modals

3 Answers3