Binding not updating, ocModal

Question

I'm using the ocModal directive + service (https://github.com/ocombe/ocModal). When someone wants to delete a record they click the delete button which pops up, via ocModal, a modal to confirm.

oc-modal-close ng-click="deleteNote(id)"

So far so good. Within the controller deleteNote runs. Console.log shows the argument is the id I passed. I call an API to delete the note from my database and on a success call a function to delete the note from the Angular variable $scope.notes.

  $scope.removeNote = function(id){
    console.log(id);
    console.log($scope.notes);
    delete $scope.notes[id];
    console.log($scope.notes);
  };

The id is correct and the $scope.notes after the delete command shows it was correctly deleted. Yet, there is no corresponding update on my front-end. Following advise I've seen on Stackover I used apply() which led to a 'digest cycle already in progress' error. I then tried to use $timeout but while that got rid of the digest cycle error, it didn't solve the problem of the bind.

Is it relevant that the $scope.notes is used by a ng-repeat that then uses a directive? I've experimented a bit and don't think so, but just in case wanted to mention it.

I suggest you make a Plunker or JSFiddle with a minimal reproduction — XrXr, Jun 13 '14 at 18:34

score 1 · Accepted Answer · answered Jun 13 '14 at 18:50

1

Where are you calling $scope.removeNote from? Is it from your main controller or in the modal's controller? maybe a directive? It feels like it is hitting the wrong scope. You can try to move notes to $scope.model.notes and see if it helps, as it will ensure the correct scope is referenced, but it's hard to say unless you try and provide a fiddle with the issue occurring. I've created this simple fiddle trying to mimic an API call with $timeout and it works -> http://jsfiddle.net/7eqsc/1/

angular.module('myApp',[])
.controller('myCtrl',function($scope,$timeout){
$scope.notes={
    a:'AngularJS',
    b:'Rocks'
}

$scope.addRandom=function(){
    $scope.notes[parseInt(Math.random()*10000).toString(36)]='New Item';
}

$scope.removeNote=function(id){
    //emulate API call
    $timeout(function(){
    delete $scope.notes[id];
    },2000);
}

});

In general, I recommend placing things under an object, such as ".model.yourArray", it ensures references are kept correctly and will save you a lot of trouble.

answered Jun 13 '14 at 18:50

GabrielG

454
4
12

$scope.removeNote is being called from within the modal, yes, but the modal's controller has been set to 'showRecordingCtrl' which is a) where all the relevant $scope variables are set and b) where remoteNote is. I think perhaps the issue is the ocModal setting (oc-modal-open="{url: 'partials/confirm_delete_note.html', init: {id: noteId}, cls: 'deleteNote', controller: 'showRecordingCtrl'}") establishes the relevant controller but not the associated binding. Going through the code now and trying to create a simple plunkr example. – Morgan Jun 13 '14 at 19:24
As a side note, I wrote a simple directive so I can add to my buttons each time I want a confirmation modal. I based it on this question here: http://stackoverflow.com/questions/18313576/confirmation-dialog-on-ng-click-angularjs and combined it with AngularUI's modals, and now each time I have a "risky" action, I put the final action in ng-click, and just add ng-click-confirm to the button, and it will then wrap it all in a confirm modal like a charm. Dirty code here -> http://pastebin.com/Be7zeB3T – GabrielG Jun 13 '14 at 19:38
1

The more I look into ocModal the more unnecessarily complex it seems for simple confirmations. It's been useful for forms and such, but I quite like the thought behind the code you reference. Might just switch over to that. Thanks! – Morgan Jun 13 '14 at 19:51
It indeed does :) Good luck! – GabrielG Jun 13 '14 at 19:54
Issue ended up being one of scope due to my own misunderstanding of ocModal in case anyone else runs into this issue. $init implementation rather than simply specifying the controller (which creates a new instance of the controller rather than using the scope of the already created controller) led to the solution, but I think GabrielG's code is a better overall implementation. – Morgan Jun 18 '14 at 23:56
If you just want to do confirmations for forms ocModal is really overkill, you should use a simple window.confirm (https://developer.mozilla.org/en-US/docs/Web/API/Window.confirm) :) But it's a good idea, I could develop a new function for ocModal just for confirms with a simplified syntax – Olivier Jun 21 '14 at 08:42
True that window.confirm is the simplest answers, but I personally wouldn't even think of putting it into a released product, it doesn't look professional. Anyhow, with angular it's so easy to implement a directive that will do the mess for you it's a petty not to :) – GabrielG Jun 21 '14 at 16:17

Binding not updating, ocModal

1 Answers1