由于我使用AngularJS的 $范围办法通过不同的控制器之间的数据（对我来说）是一个初学者一个模式让我发疯。由于这个原因，我用Google搜索了网络上，发现了一个有趣的博文有关数据传递到用户界面，引导模式，而无需使用 $范围。

我在此博文深入了解和交付普拉克这工程pretty不错，开始采用这个我自己的需求。

我想要实现的是打开一个模式递送文本输入，其中用户能够改变给定产品的描述。因为这将提供比最小的工作的例子更我只是打破一切下降到这个提供一个相对较小的code片段普拉克。

从主控制器为模态传递数据似乎为所需的默认产品说明显示在模态文字输入工作。然而，从模态传递数据传回显示在数据的index.html 主控制器似乎并没有工作，因为显示有旧的描述中，编辑后在模态。

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

我是什么在奥得河做错了，实现了双向结合从主控制器到模式的文本输入和背部全路，因为同样的方法在提到的博文作品（当然，如图所示的方法在博文的作品一定有什么问题我的code，但我找不到错误）如何才能接受修改描述实现适当的接受按钮只有在单击此按钮，并丢弃在其他情况下的任何变化（点击取消键或单击旁边）关闭模式？解决方案

在你的主控制器，创建双解析器功能： getDescription 和 setDescription 。

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

您的HTML模式

 ＆LT; D​​IV CLASS =模头＆GT;    ＆LT; H3类=模式标题＆gt;在模态℃使用试验文本输入; / H3 GT＆;＆LT; / DIV＆GT;＆LT; D​​IV CLASS =模体＆GT;    产品描述：    ＆LT;输入类型=文本NG模型=modal.description＆GT;＆LT; / DIV＆GT;＆LT; D​​IV CLASS =模式躯＆GT;    ＆LT;按钮NG点击=modal.acceptModal（）＆GT;＆接受LT; /按钮＆GT;    ＆LT;按钮NG点击=$模式关闭（）。＆GT;取消＆LT; /按钮＆GT;＆LT; / DIV＆GT; 

您的主控制器

 函数MainCtrl（$模式）{  VAR自我=这一点;  self.description =默认产品说明;  self.DescriptionModal =功能（）{    $ modal.open（{      templateUrl：modal.html'，      控制器：['$ modalInstance'，                   getDescription，                   setDescription'，                    ModalCtrl                  ]      controllerAs：'模式'，      解析：{        getDescription：功能（）{          复位功能（）{返回self.description; };        }，        setDescription：功能（）{          返回功能（值）{self.description =价值; };        }      }    }）;  };}; 

您的模态控制器

 函数ModalCtrl（$ modalInstance，getDescription，setDescription）{  VAR自我=这一点;  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:

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