在模态窗口中操作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的值

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

你可能感兴趣的:(Angular,模型,模态窗口)