在模态窗口中操作angular模型的一种惯用方法

用angular开发一个表单，通常的做法是将form绑定到一个模型上。这样编辑字段的同时，也就改变了模型。最后提交时，无论是写入数据库，还是提交http请求，只要操作此模型即可

但是也有另一种交互场景：编辑某字段时，弹出一个新的模态窗口。在窗口内进行的操作（比如从列表中选取一些项），只有点击确定之后，才算真正对该字段进行了编辑。如果点击取消，或者直接关闭模态窗口，则此字段不应该发生变化。在这种场景下，单模型的方式就不能用了。因为在模态窗口内做的操作，不应该对模型直接造成修改

这2天做了几个这种场景，总结了一种惯用的方法：

1、应该有一个最终模型A，绑定到表单上，对应最后的提交动作。还需要一个临时模型B，用来对应在模态窗口内的操作

2、在初始化模态窗时，将模型A赋值给模型B：

function refreshSelectedServiceCatesTemp(){
$scope.selectServiceCatesTemp = _.clone($scope.currentSelectServiceCates.services);
}

3、模态窗口中的各种操作，都赋值给模型B

4、如果直接关闭模态窗口，或是点击取消，则不需要做任何事。这样下次重新打开模态窗口时，模型B仍然是正确的值

5、如果点击确定，则将模型B赋值给模型A：

$scope.currentSelectServiceCates = _.clone($scope.selectServiceCatesTemp);

6、最后提交表单时，取模型A的值

以上的步骤，可以适用于有模态选择框的交互场景。总的来说，页面中存在多少个交互层次，就需要多少个模型