Create, update, delete modal dialogs?

[Arni Arent]

Hi

What would be the best way to implement modal dialogs for those CRUD actions using Angular+Bootstrap?

How would you display the dialog?
How would you execute any action?

etc.

Any insight is helpful.

[Peter Bacon Darwin]

I'm using something like this:

angular.module('directives.modal', []).directive('modal', ['$parse', function($parse){

  var directive = {

    restrict: 'C',

    link: function($scope, $element, $attrs, $controller){

      var showFn = $parse($attrs.show);

      if ( !$element.modal ) {

        throw new Error("Modal directive requires Twitter Bootstrap Modal library");

      }

      $element.modal({ backdrop: $attrs.backdrop, keyboard: $attrs.keyboard, show: showFn($scope) });

      $scope.$watch(showFn, function(value) {

        if ( value ) {

          $element.modal('show');

        } else {

          $element.modal('hide');

        }

      });

    }

  };

  return directive;

}]);

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Arni Arent]

Hmm...

How would the lifecycle be?

A user presses "edit" button on some record, what then? How do you go from clicking a edit button to displaying a modal with correctly populated information, and then save that information?


I'm using the bootstrap example, but it doesn't show you how to dynamically load data:
<button class="btn btn-small" data-toggle="modal" data-target="#myModal"><i class="icon-edit"></i>Edit</button>

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">
(I had to add display:none because by default the modal dialog is shown)
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>


Should you do a <button ng-click="showEditDialog(id)"> and then execute some javascript code to load in the modal dialog partial?

Sorry if these questions sound stupid, but only been using angular for 1 day :)

[Peter Bacon Darwin]

You have something like this:

<div class="modal" show="editUser">

...

</div>

Then in your controller or somewhere you change editUser to true to show the modal and false to hide it.

Pete

[Arni Arent]

I found this: http://plunker.no.de/edit/lF9nAW?live=preview

It explains it very well. Thanks Peter.

[avvensis]

How to reset editUser when modal closed by Esc button?
modal have event hide but i don't know how change property to initial value.

пятница, 5 октября 2012 г., 18:03:10 UTC+6 пользователь Peter Bacon Darwin написал:

[Brad McAlister]

Does this plunker still exist? I'm trying to do the same thing and was hoping this would help me out. If it doesn't does anyone know of another example floating around out there?

Thanks!

[Johannes Hiemer]

Hi Brad,

it seems down for me as well. Take a look here: it is not the AngularUI Bootstrap modal, but very near (actually my own implementation). Atm you just can add, but I maybe add the edit and delete as well, it is a no brainer and should take 5 minutes (http://plnkr.co/edit/PFaSIE?p=streamer). Important for you is the correlation between the Controller and the ChildController.

[Johannes Hiemer]

Hi Brad, 

I updated the plnkr with a edit and delete function. Still some small bugs in it. Will be fixed during the day. Let me know, if you have further questions!

[Joshua Miller]

There's also ui-bootstrap, which provides a modal directive: http://angular-ui.github.com/bootstrap/#/modal. As it is defined in markup, it should be good for CRUD operations too.

Josh

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Aaron Murray]

I am having the same issue as the OP here and I checked out your plnkr with great interest.  However, it doesn't solve the problem I'm having, and I was hoping you might be able to provide some insight.

The problem I want to solve is this (I'll use your Todo list app as an example):

Once a Todo item is created, and you click on the edit button, the modal dialog appears with the data from the Todo item filled in.  However, when you edit the fields, the model itself is updated live (you can see the edits changing the data in the background).

For the life of me I cannot figure out how to copy a model instance into the modal, modify it, and then save it back into the model when you click Save on the modal.  I am able to create a modal like you have, where the root mode is changed from inside the modal dialog, but I can't implement a true save/discard pattern.

I am able to get an object out of the modal dialog, but I can't figure out how to insert it back into the model.

[Sylvester Keil]

Aaron,

I implemented something like this recently; unfortunately this was for an internal app so I can post the code here, but I can help you walk through the issues involved.

Basically, I wrote a generic modal directive with a generic controller providing a scope for the model to be modified in the modal and open, confirm, dismiss and lock functionality (the latter is really important as well!).

Then, I wrote directives for each modal/resource type, e.g., a video-modal, document-modal etc. These directives all require the generic modal's controller and I can use it to easily open modals for given resources from all over the application without having to worry about the scope-tree and so on.

New objects are passed into the modal as is, otherwise I save a reference to the original object and send a duplicate to the modal – like you said, this is necessary so that canceled changes are never propagated to the model on the page.

When the modal is dismissed all references can simply be discarded; when you save, however, the modal is locked so that it can't be accidentally closed while the object is being saved. If saving fails, the modal is unlocked and you can display appropriate error messages; if the object was saved successfully, you can add it to the page (if it was a new object) or replace the original object with the updated one.

hth,
Sylvester

> --
> You received this message because you are subscribed to the Google Groups "AngularJS" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

> To post to this group, send email to ang...@googlegroups.com.

> Visit this group at http://groups.google.com/group/angular?hl=en-US.

> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[Aaron Murray]

Thanks for the reply.  I am using the Angular UI Bootstrap modal directive (I'm asking in that group as well).

I had an idea and got it working this morning, but I'm not sure how robust or Angular-like it is.

In the method that spawns my dialog I am passing the reference to the single model element (todo in todos).  Before I open the dialog, I get the index of the element in the model like so:

$scope.modalEdit = function(todo){

        var d = $dialog.dialog({modalFade: false, resolve: {todo: function(){ return angular.copy(todo); } }}),

            modelIndex = $scope.todos.indexOf(todo);

        d.open('partials/edit_todo.jade', 'EditTodoCtrl').then(function(result) {

            if (result) {

                $scope.todos[modelIndex] = angular.copy(result);

            }

        });

    };

This is functioning the way I would like (saves aren't applied until Save is clicked, and changes are disgarded when Cancel is clicked), but I'm not sure .indexOf() is the best way of inserting data back into an Angular model.

Thanks,

Aaron