AngularJS scope issue with a UI-modal window

Question

I'm using the UI-bootstrap modal window in my Angular application and I'm running into some kind of a scope problem.

I've got a modal dialog which basically has two modes. At first, it displays a list of existing items for the user to select from. In case the item the user needs is not in the list, he can click "Create", then I hide the div containing the list and display another div which contains an input form so the user can add an entry to the list. This is all really trivial stuff. The buttons to toggle which div is being shown work fine. I basically have a boolean scope variable called "create", which takes care of this.

Then, in the modal-footer I have two save buttons. One is shown when in "list" mode and the other is shown when the user is in "create" mode. Again, works fine.

Now, when the user is in "create" mode and clicks the corresponding "save" button, then I need to process the form and finally switch the state back to the list, that is set the "create" scope variable back to false, but this is not working for me. It's like I'm dealing with more than one scope since the view does not update when I update the "create" variable from the button click in the controller.

I've created a working Plunker which demonstrates this, please have a look:

http://plnkr.co/edit/KDxzH21Lmthg0bc0cfUT?p=preview

I know this is probably something really simple I'm missing. Hoping someone can point me in the right direction!

EDIT: As per the suggestion below from Mik378, I created an "intermediate" object in the scope and assigned the "create" variable to it. Now this works like I wanted to.

I updated the Plunker: http://plnkr.co/edit/KDxzH21Lmthg0bc0cfUT?p=preview

Yeah, I figured that out but I'm not sure how I can properly access it to do what I need to do. — HaukurHaf
– HaukurHaf, Commented Jun 29, 2014 at 14:26
if you're using scope.myVariableToReach, you have to change that by scope.oneIntermediateObjectNotAccessibleInTheChildScope.myVariableToReach. Otherwise, when you set scope.myVariableToReach directly, it would change the child one, not affecting the outer. — Mik378
– Mik378, Commented Jun 29, 2014 at 14:28
This issue is a result of prototypal inheritance explained here: github.com/angular/angular.js/wiki/Understanding-Scopes — Rob J
– Rob J, Commented Jun 29, 2014 at 16:11

Mik378 · Accepted Answer · 2014-06-29 15:23:31Z

2

If you're using scope.myVariableToReach, you have to change that by scope.oneIntermediateObjectNotAccessibleInTheChildScope.myVariableToReach.

Otherwise, when you set scope.myVariableToReach directly, it would change the child one, not affecting the outer.

answered Jun 29, 2014 at 15:23

Mik378

22.2k15 gold badges94 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS scope issue with a UI-modal window

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related