javascript - Angular.js如何在两个模态之间进行通信

我在这里试图做的是：

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

例如：现有对象：{“ default”：“ English”}，当我键入“ German”时，将添加一个新对象，如下所示：{“ default”：“ English”，“ German”：“ German”}

这是我的PLUNKER。

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

最佳答案

我更喜欢使用事件。只需订阅一些活动，例如：

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

另一个会触发它：

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

当我尝试保存您的punkr或我没有权限时，系统发生故障，因此代码如下：

        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>

让我知道是否有任何问题

关于javascript - Angular.js如何在两个模态之间进行通信，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22850442/