javascript - Angularjs 如何在两个模态之间进行通信

Question

我在这里想做的是:

输入新语言名称并单击“添加”按钮，新语言将添加到现有对象中。

例如:现有对象:{“default”:“English”}，当我输入“German”时，会添加一个新对象，如下所示:{“default”:“English”，“German”:“德语”}

这是我的 PLUNKER 。

有人可以帮我吗？非常感谢，我将不胜感激!

Answer 1

我更喜欢使用事件。只需订阅某个事件的一篇文章，例如:

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

另一个会触发它:

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

当我试图保存你的 plunkr 时系统出现故障，或者我没有权限，所以这里是代码:

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




    };

您可以将这段内容复制到 plunkr 中，而不是您的。还要更改布局:

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

如果有问题请告诉我