在不使用 $scope 的情况下将变量传递给 UI-bootstrap 模态

Question

因为我是初学者，所以我使用 AngularJS $scope 方法在不同控制器之间传递数据，并且（在我的例子中）模态让我抓狂。由于这个原因，我在网上搜索了一下，发现了一个有趣的 blogpost 关于在不使用 $scope.

的情况下将数据传递给 UI-bootstrap 模式

我深入研究了这篇博文和交付的 plunk，效果非常好，并开始根据自己的需要采用它。

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

中可用

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

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

为了实现从主控制器到模式文本输入的 'two-way-binding' 以及整个返回过程，我做错了什么，因为在提到的博文中使用了相同的方法（好吧，如图所示的方法在博文作品中，我的代码肯定有问题，但我找不到错误）
我如何实现一个正确的 Accept 按钮，以便只有在单击此按钮时才接受更改的描述，并在任何其他情况下放弃任何更改（单击 Cancel 按钮或关闭单击它旁边的模态)?

Answer 1

在您的主控制器中，创建两个解析器函数：getDescription 和setDescription。

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

你的模态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>

你的主控制器

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

你的模态控制器

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

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

在不使用 $scope 的情况下将变量传递给 UI-bootstrap 模态

Pass variable to UI-bootstrap modal without using $scope

controller

angularjs

angularjs-scope

angular-ui-bootstrap

bootstrap-modal