I have created a rather generic dialog directive for multiple uses... however when i use it to edit data .. it's still two-way bound to the scope on the original calling controller.
It's likely simple, but i'm having trouble. i need to clone the scope during the dialog, and then before the okCallback i need to copy the scope back... so a user can actually cancel.
<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>
The issue becomes evident in this fiddle. http://jsfiddle.net/hiddenkirby/HT6X7/
edit a category, and then start typing in the box.
Any thoughts? I'd like to keep the transclusion usage aspect of the directive.
Is there a more "angular" way of approaching/solving this problem?
When the edit form is displayed, copy the current data values into a variable/property:
$scope.showEditDialog = function(category, index){
$scope.index = index;
$scope.origData = angular.copy(category);
If the user hits cancel/No, restore it:
$scope.dismissEditDialog = function(){
$scope.categories[$scope.index] = $scope.origData;
HTML change:
<a ng-click="showEditDialog(category, $index)">Edit</a>
So i concluded with the following fiddle. http://jsfiddle.net/hiddenkirby/FYCXk/
I turned transclusion off to make use of the isolate scope. I then do an angular.copy on a parametrized model value (if it exists).. but i grab it from
scope.$parent["nameOfObjectOnParent"]
Copying it allows me have a cancel state in my dialog for edits. An additional bonus to this isolate copy of the model being edited is that it gives me something to $watch on with a validationCallback.
I will be able to optionally put a full form on the dialog with bindings, and pass an object to it with some validation rules.