在不使用 $scope 的情况下将变量传递给 UI-bootstrap 模式 [英] Pass variable to UI-bootstrap modal without using $scope

问题描述

由于我是使用 AngularJS 的初学者，因此 $scope 方法在不同的控制器和(在我的情况下)模式之间传递数据让我发疯.由于这个原因，我在网上搜索了一下，发现了一个有趣的 博文 关于在不使用 $scope 的情况下将数据传递到 UI-bootstrap 模式.

我更深入地研究了这篇博文和交付的 plunk 效果很好并开始根据我自己的需要采用它.

我想要实现的是打开一个提供文本输入的模式，用户可以在其中更改给定产品的描述.由于这将提供的不仅仅是一个最小的工作示例，我只是将所有内容分解为此 plunk.

将数据从主控制器传递到模态似乎可以正常工作，因为默认产品描述会根据需要显示在模态文本输入中.然而，将数据从模态传递回主控制器，在 index.html 中显示数据似乎不起作用，因为旧的描述在模态中编辑后显示在那里.>

总结一下我的两个问题是:

1. 为了实现从主控制器到模态文本输入的双向绑定"以及整个返回，我做错了什么，因为在提到的博客文章中使用了相同的方法(嗯，如所示的方法)在博文作品中，我的代码肯定有问题，但我找不到错误)
2. 如何实现正确的 Accept 按钮，以便仅在单击此按钮时接受更改的描述并在任何其他情况下放弃任何更改(单击 Cancel按钮或通过单击旁边的模式关闭它)?

解决方案

在你的主控制器中，创建两个解析器函数:getDescription 和 setDescription.

在您的模态控制器中，使用它们.

你的模态 HTML

<h3 class="modal-title">在模态中测试文本输入</h3>
<div class="modal-body">产品描述:<input type="text" ng-model="modal.description">

<div class="modal-footer"><button ng-click="modal.acceptModal()">接受</button><button ng-click="modal.$close()">取消</button>

您的主控制器

function MainCtrl($modal) {var self = this;self.description = "默认产品描述";self.DescriptionModal = function() {$modal.open({templateUrl: 'modal.html',控制器:['$modalInstance'，'获取描述','设置说明',模态控制],controllerAs: '模态',解决: {获取说明:函数(){return function() { return self.description; }};},设置说明:函数(){返回函数(值){ self.description = value;};}}});};};

你的模态控制器

function ModalCtrl($modalInstance, getDescription, setDescription) {var self = this;this.description = getDescription();this.acceptModal = 函数(){setDescription(self.description);$modalInstance.close();};}

Since I am a beginner using AngularJS the $scope approach to pass data between different controllers and (in my case) a modal drives me crazy. Due to that reason, I googled around the web and found an interesting blogpost about passing data to a UI-bootstrap modal without using $scope.

I had a deeper look at this blogpost and the delivered plunk which works pretty nice and started to adopt this to my own needs.

What I want to achieve is to open a modal delivering an text input in which the user is able to change the description of a given product. Since this would provide more than a minimal working example I just broke everything down to a relatively small code snippet available in this plunk.

Passing data from the main controller into the modal seems to work as the default product description is displayed in the modal text input as desired. However, passing the data back from the modal to the main controller displaying the data in index.html does not seem to work, since the old description is shown there after it was edited in the modal.

To summarize my two questions are:

1. What am I doing wrong in oder to achieve a 'two-way-binding' from the main controller into the modal's text input and the whole way back since the same approach works in the mentioned blogpost (well, as the approach shown in the blogpost works there must be something wrong with my code, but I cannot find the mistakes)
2. How can I implement a proper Accept button in order to accept the changed description only if this button is clicked and discard any changes in any other case (clicking on Cancel button or closing the modal by clicking next to it)?

解决方案

In your main controller, create two resolver functions: getDescription and setDescription.

In your modal controller, use them.

Your modal HTML

<div class="modal-header">
    <h3 class="modal-title">Test Text Input in Modal</h3>
</div>
<div class="modal-body">
    Product description:
    <input type="text" ng-model="modal.description">
</div>
<div class="modal-footer">
    <button ng-click="modal.acceptModal()">Accept</button>
    <button ng-click="modal.$close()">Cancel</button>
</div>

Your main controller

function MainCtrl($modal) {
  var self = this;
  self.description = "Default product description";

  self.DescriptionModal = function() {
    $modal.open({
      templateUrl: 'modal.html',
      controller: ['$modalInstance', 
                   'getDescription', 
                   'setDescription', 
                    ModalCtrl
                  ],
      controllerAs: 'modal',
      resolve: {
        getDescription: function() {
          return function() { return self.description; };
        },
        setDescription: function() {
          return function(value) { self.description = value; };
        }
      }
    });
  };
};

Your modal controller

function ModalCtrl($modalInstance, getDescription, setDescription) {
  var self = this;
  this.description = getDescription();

  this.acceptModal = function() {
    setDescription(self.description);
    $modalInstance.close();
  };
}

这篇关于在不使用 $scope 的情况下将变量传递给 UI-bootstrap 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！