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

Question

我在这里尝试做的是：

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

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

这是我的朋克 。

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

Answer 1

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

Answer 2

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

$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>

让我知道是否有任何问题

Answer 3

实现您所需的angular-ui方法将是使用angular-ui文档中找到的这两种基本方法。 有关以下答案，请参见相关的插头 。

首先是在模式的实例控制器内部使用close(result) ，它会更新实例控制器的result Promise属性

其次是使用result承诺属性来获取传递给close()方法的结果

在AddNewLanguageCtrl里面是这样的

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

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

在您的addNewLanguageDialog.html脚本模板中，而不是使用

<input ng-model="newLanguage">

用这个

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

这是因为每当创建模态时，如果在按angular-ui文档所述调用$ modal.open（）时未将范围传递给选项，则将在$ rootScope（default）下创建一个新范围。 如果您使用newLanguage作为模型，则它在AddNewLanguageCtrl内部不会收到任何更新。 您可以阅读这篇文章 ，以更好地了解我在谈论范围

在第一个模态ModalInstanceCtrl内是这样的

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

  };

然后在您的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);
    });

  };