JSFiddle - React, Tailwind, and code Playground

by gogirl

HTML

<div ng-app="myApp">
    <h2>Why-no binding on message.text?</h2>
    <label>Msg:
        <input type="text" ng-model="msg" />
    </label>
    <label>Message.text:
        <input type="text" ng-model="message.text" />
    </label>
    <div ng-controller="ParentCtrl">
         <h2>Parent</h2>
 <p>In sync with msg value: {{msg}}</p>
<p>In sync with message.text value: {{message.text}}</p>
        <label>Msg:
            <input type="text" ng-model="msg" />
        </label>
        <label>Message.text:
            <input type="text" ng-model="message.text" />
        </label>
        <hr/>
        <div ng-controller="ChildCtrl">
             <h2>Child</h2>

            <label>No dot breaks binding in msg:
                <input type="text" ng-model="msg" />
            </label>
            <p>Child scope uses prototypical inheritance to look up the value, so as long as it never gets set on the child, then it will defer to the parent scope. But, once it's set, it no longer looks up the parent.</p>
            <label>Dot keeps binding in message.text:
                <input type="text" ng-model="message.text" />
            </label>
            <p>In sync with msg value: {{msg}}</p>
<p>In sync with message.text value: {{message.text}}</p>

        </div>
    </div>
</div>

JavaScript

//http://egghead.io/lessons/angularjs-the-dot
//http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-//scope-prototypal-prototypical-inheritance-in-//angularjs/14049482#14049482
//http://stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model
var app = angular.module("myApp", [])
    .controller("ParentCtrl", function ($scope) {
    $scope.msg = "Hello";
    $scope.message = {
        text: "Howdy"
    };
})
    .controller("ChildCtrl", function ($scope) {});