Question

我在这里要做的是：

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

例如：现有对象：{“default”：“English”}，当我输入“German”时，会添加一个新对象：{“default”：“English”，“German”：“德国“}

这是我的PLUNKER。

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

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

实现所需要的角度ui方法是使用angular-ui文档中的这两种基本方法。有关以下答案，请参阅相关的plunker。

首先使用模态的实例控制器中的close(result)来更新实例控制器的result promise属性

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

AddNewLanguageCtrl 内部是这样的

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

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

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

<input ng-model="newLanguage">

使用此

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

这是因为无论何时创建模式，如果在调用$ modal.open（）时未按照{{{{{{{{{{{{{{{{ 3}}文档。如果您使用newLanguage作为模型，那么它将无法在AddNewLanguageCtrl内收到任何更新。您可以angular-ui更好地了解我在讨论范围方面的内容

第一个模态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);
    });

  };

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

3 个答案: