是否有处理＆QUOT模式;取消]在AngularJS模态对话框？ [英] Is there a pattern for dealing with "Cancel" in AngularJS modal dialogs?

问题描述

请注意：这是不是显示与AngularJS一个模态对话框，该主题有大量的问题和答案

Note: This is not about showing a modal dialog with AngularJS, that topic has plenty of questions and answers!

这个问题是关于如何将一个模式对话框中反应都确定和取消一个页面上。比方说，你已经得到了只有一个变量的作用域在它：

This question is about how to react to both OK and Cancel within a modal dialog on a page. Let's say you've got a scope with just one variable in it:

$scope.description = "Oh, how I love porcupines..."

如果我为您提供的网页和使用NG模型=说明该对话框中的一个模式对话框，你们所做的更改实际上是实时为您键入做出的描述本身。这是很糟糕的，因为那你怎么抵消该对话框的？

If I provide you with a modal dialog on the page and use ng-model="description" within that dialog, all of the changes you make are actually made in real time to the description itself as you type. That's bad, because then how do you cancel out of that dialog?

有这个问题，说做什么，我在下面解释。它的接受的答案是一样的解决方案，我想出了：<一href=\"http://stackoverflow.com/questions/12792077/angularjs-data-bound-modal-save-changes-only-when-save-is-clicked-or-forge\">AngularJS:数据绑定模式 - 保存更改只有在[储存＆QUOT;被点击，或者忘记了变化，如果＆QUOT;取消]点击

There's this question that says to do what I explain below. The accepted answer for it is the same "solution" I came up with: AngularJS: Data-bound modal - save changes only when "Save" is clicked, or forget changes if "Cancel" is clicked

我可以看到如何做到这一点，如果点击按钮，弹出一个模式可以追溯到在后面的函数，创建了模式的相关数据的临时副本，然后弹出的模式。然后确定（或保存或其他）可以在临时值复制到实际的模型值。

I can see how to do it if clicking the button to bring up a modal goes back to a function in the back and that creates a temporary copy of the relevant data for the modal and then pops up the modal. Then "OK" (or "Save" or whatever) could copy the temporary values to the actual model values.

main.js（节选）：

main.js (excerpt):

$scope.descriptionUncommitted = $scope.description;

$scope.commitChanges = function () {
  $scope.description = $scope.descriptionUncommitted;
}

main.html中（节选）：

main.html (excerpt):

<input type="text" ng-model="descriptionUncommitted"/>

<button ng-click="commitChanges()">Save</button>

这样做的问题是这不是声明！事实上，它没有像AngularJS其他地方。这几乎就像我们需要一个NG-模型未提交=说明，他们可以使他们想要的所有的变化，但是当我们与另一个声明引发他们只得到承诺。是否有一个插件，这样的事的地方或AngularJS本身加入了吗？

The problem with that is it's not declarative! In fact, it's nothing like AngularJS anywhere else. It's almost as though we need an ng-model-uncommitted="description" where they could make all the changes they want but they only get committed when we trigger with another declaration. Is there such a thing in a plugin somewhere or is AngularJS itself adding it?

编辑：看来的这样做可能是为了不同的方式的例子

main.js

$scope.filename = "panorama.jpg";
$scope.description = "A panorama of the mountains.";

$scope.persist = function () { // Some function to hit a back end service. };

main.html中：

main.html:

<form>
  <input type="text" ng-model-uncommitted="filename"/>
  <input type="text" ng-model-uncommitted="description"/>

  <button ng-commit ng-click="persist()">Save</button>
  <button ng-discard>Cancel</button>
</form>

我坚持一个表单标签围绕它，因为我不知道你将如何组中的项目，很明显这是同样的交易（因为缺乏一个更好的词）的一部分。但将需要某种方式，这可能所有自动发生和模型变量的克隆拷贝被用于初始值，用于输入和自动更新，验证等，和然后最后丢弃或复制到相同值，该值最初使用，如果用户决定提交创建它们。

I stuck a form tag around it because I don't know how you would group the items so it was clear it was all part of the same "transaction" (for lack of a better word). But there would need to be some way that this could all happen automatically and the cloned copies of the model variables are used for initial values, used for input and updated automatically, validated, etc. and then finally discarded or copied to the same value that initially was used to create them if the user decides to commit.

是不是这样的事情不是code更容易在控制器中一遍又一遍的20情态动词做工作，在一个大的网站？还是我疯了吗？

Isn't something like this easier than code in the controller to do that work over and over again for 20 modals in a big website? Or am I nuts?

推荐答案

基本上，如果角的东西是不是声明，你犯了一个指令

Basically, in angular if something is not declarative, you make a directive.

 .directive('shadow', function() {
  return {
    scope: {
      target: '=shadow'            
    },
    link: function(scope, el, att) {
      scope[att.shadow] = angular.copy(scope.target);

      scope.commit = function() {
        scope.target = scope[att.shadow];
      };
    }
  };

然后：

  <div shadow="data">
    <input ng-model="data">
    <button ng-click="commit()">save</button>
  </div>

所以数据的阴影里面指令将原来的复制 数据。
这将是复制回按钮被点击时，原来的。

So data inside the shadow directive will be a copy of the original data. And it will be copied back to the original when the button is clicked.

和这里的例子： jsbin

我没有测试它超出了这个例子，所以它可能不会在其他情况下工作，但我觉得它给possibilites的想法。

I've not tested it beyond this example, so it may not work in other cases, but I think it gives an idea of the possibilites.

编辑：

与对象，而不是一个字符串，多个领域的形式（额外 angular.copy 这里需要）又如：的jsbin

Another example with an object instead of a string, and several fields in the form (an additional angular.copy is required here): jsbin

EDIT2，棱角分明的版本1.2.x版本

按本<一个href=\"https://github.com/angular/angular.js/commit/909cabd36d779598763cc358979ecd85bb40d4d7\">change,
在输入指令内不再被访问隔离范围。一种选择是创建一个非孤立子范围（范围：真正的），来保存数据的复制和访问父作用域保存它

As per this change, the input inside the directive is not accessing the isolated scope anymore. One alternative is creating a non-isolated child scope (scope:true), to hold the copy of the data and accessing the parent scope for saving it.

因此​​，更高版本的角度，这是因为之前稍加修改，以这样的伎俩相同的方法：

So for later versions of angular, this is the same approach as before slightly modified to do the trick:

.directive('shadow', function() {
  return {
    scope: true,
    link: function(scope, el, att) {
      scope[att.shadow] = angular.copy(scope[att.shadow]);

      scope.commit = function() {
        scope.$parent[att.shadow] = angular.copy(scope[att.shadow]);
      };
    }
  };
});

例如： jsbin

注意使用 $父的问题是，如果最终出现在中间的另一范围，它可能会断裂。

Note that the problem with using $parent, is that it may break if eventually there is another scope in the middle.

这篇关于是否有处理＆QUOT模式;取消]在AngularJS模态对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！