对话框的 transcluded 指令需要有自己的编辑操作范围

Question

我创建了一个相当通用的对话框指令，用于多种用途…然而，当我用它来编辑数据…它仍然是与原始调用控制器上的作用域的双向绑定。

这可能很简单，但我有麻烦。我需要在对话框期间克隆范围，然后在okCallback之前，我需要将范围复制回来…所以用户可以取消。

<div mydialog 
    open="{{isEditDialogOpen}}"
    modal="true"
    ok-button="Yes"
    ok-callback="saveEdits"
    cancel-button="No"
    cancel-callback="dismissEditDialog"
    title="Edit Category">
        <input ng-model="categoryToEdit.name" label-text="Category Name"></input>  
</div>

这个问题在这里变得很明显。http://jsfiddle.net/hiddenkirby/HT6X7/

编辑一个类别，然后开始在框中键入。

任何想法吗?我想保留指令的透传用法。

有没有更"有角度"的方法来接近/解决这个问题?

Answer 1

显示编辑表单时，将当前数据值复制到变量/属性中:

$scope.showEditDialog = function(category, index){
    $scope.index = index;
    $scope.origData = angular.copy(category);

如果用户点击取消/否，恢复它:

$scope.dismissEditDialog = function(){
    $scope.categories[$scope.index] = $scope.origData;

HTML变化:

<a ng-click="showEditDialog(category, $index)">Edit</a>

小提琴

Answer 2

所以我总结了下面的小提琴。http://jsfiddle.net/hiddenkirby/FYCXk/

我关闭透光以利用隔离作用域。然后执行一个angular。复制参数化模型值(如果存在，则)。但是我从

中获取它

scope.$parent["nameOfObjectOnParent"]

复制它允许我在编辑对话框中有一个取消状态。这个正在编辑的模型的孤立副本的另一个好处是，它给了我一些$watch与validationCallback有关的东西。

我将能够有选择地把一个完整的表单与绑定的对话框，并传递一个对象与一些验证规则。