Cannot Read $scope in Bootstrap Modal

Question

I am trying to write something with Angular Bootstrap's Modal. This injects a div at the end of the html body, which is not wrapped in a controller. The result is I have not been able to access bindings via $scope, but for some reason I can write them to the view from the model.

The code can be found here.

Link to code on plnkr

On line 23, you will find the $scope is successfully written to, and the data is bound to a input. However, if you then edit the input, 3 seconds later, the $scope that is bound to it is alerted, but changes in the view are not reflected. I have found that this can be solved by wrapping the modal in its own controller, but then I am unable to get what I want to do to work.

Is it possible to access changed in the model from the controller?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Per the angular wiki page on scope best practices.

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved. (See this example for a quick illustration of the problem.)

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 27, 2014 at 12:39

acg

9615 silver badges11 bronze badges

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

3 Comments

Kohjah Breese Over a year ago

Thanks, that was a bit easier to get my head round.

acg Over a year ago

@KohjahBreese great that you got it working and it makes sense, could you mark either of the answers as correct? Picky about unanswered questions ;)

Kohjah Breese Over a year ago

I would, but I am unable to select my own answer for another 41 minutes.

Kohjah Breese · Accepted Answer · 2014-08-27 12:29:32Z

0

I have found the answer, but do not understand the issue, so would be grateful if someone could explain.

The code needs to be change to:

$scope.data = {};
$scope.data.yn = 'this';
alert( $scope.data.yn );
setTimeout( function(){alert( $scope.data.yn )}, 3000 );

and the input to:

<input type="text" name="yourName" value="David" data-ng-model="data.yn" />

From:

$scope = {};
$scope.yn = 'this';
alert( $scope.yn );
setTimeout( function(){alert( $scope.yn )}, 3000 );

input:

<input type="text" name="yourName" value="David" data-ng-model="yn" />

answered Aug 27, 2014 at 12:29

Kohjah Breese

4,1666 gold badges34 silver badges51 bronze badges

1 Comment

James Kleeh Over a year ago

Models should always have dots in them. The reason has been detailed many times by people who could describe it much better than me. Here is one example: nathanleclaire.com/blog/2014/04/19/…

Collectives™ on Stack Overflow

Cannot Read $scope in Bootstrap Modal

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related