8

I am noticing some weirdness with the ui-bootstrap modal scope. It seems that when using ng-model in it, you have to reference $parent to get to the scope of the modal controller. Notice in my plunker that the other properties such an ng-options doesn't require $parent: http://plnkr.co/edit/xGSHz4EkZvGr2D6CUeBz?p=preview

Any idea why? I found a similar issue here: Scope issues with Angular UI modal

That led me to try the $parent change but I am unable to comment on that thread because I don't have enough reputation.

Any idea why the scope seems to change?

Thanks!

1 Answer 1

14

The modal has its own scope (I've never used Angular UI, but it's the only thing that can be happening) and when you're setting "selectedLocation" the property is getting set on the modal's scope and not your controller's scope. The $parent is forcing it to got your controller's scope, but that's not a good solution because you'll be locking your self into a certain structure always assuming the parent of the modal has the "model".

Here's a modified Plunker using a model object on your controller scope (using model.selectedLocation) http://plnkr.co/edit/B5kZaIA5xi2RediUTBK7?p=preview

Anyways, if you put your property on something like "$scope.model.selectedLocation" that changes the behavior. Now, when I reference "model.selectedLocation" on the modal, the modal's scope doesn't have a model object so Angular goes up the scope chain to your controller's scope (which does have a model object).

Watch this video from John Lindquist, I think it can explain it much better than I can. :-) http://egghead.io/lessons/angularjs-the-dot

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.