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!

Answer 1

根据定义，您需要使用服务，并将其注入两个模型，向服务中的数组添加监视，并根据服务中的值在每个模型的范围内进行相应更新。

Answer 2

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

Answer 3

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);
    });

  };