I'm new to Angular, so I'm trying to follow tutorial and just don't get it.What confuses me is the dot notation:
<div ng-app="">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
Typing a value inside any of the input boxes will update all the other input boxes.
So, what I think that is going on here is that the first ng-model
declaration outside controllers is binding the input element value to the data.message model in the root scope.I don't understand how the bindings inside ng-controller
are then reading the value from the root scope, and why values inserted inside ng-controller
scope will be shown in a input box outside that scope?
Also if data.
is removed
<div ng-app="">
<input type="text" ng-model="message">
<h1>{{ message }}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="message">
<h1>{{ message }}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="message">
<h1>{{ message }}</h1>
</div>
</div>
that behavior is gone, how come?
See Question&Answers more detail:os