Think2ceCode1ce Think2ceCode1ce - 6 months ago 12
AngularJS Question

Scope inheritance with ng-bind (not working) vs {{ }} (working)

I am learning AngularJS and just done with the scope inheritance. Following is the sample code I wrote. I am referencing angular version 1.5.0

HTML

<div ng-controller="ScopeInheritanceParentController" class="scope_inheritance_parent">
<span>Parent</span><br /><br />
<!--<span ng-bind="title" /><br /><br />-->
<span>{{title}}</span><br /><br />
<input type="text" ng-model="title" /><br /><br />
<div ng-controller="ScopeInheritanceChildController" class="scope_inheritance_child">
<span>Child</span><br /><br />
<!--<span ng-bind="title" /><br /><br />-->
<span>{{title}}</span><br /><br />
<input type="text" ng-model="title" />
</div>
</div>


JS

angular.module('myapp.controllers')
.controller('ScopeInheritanceParentController', ['$scope', function ($scope) {
$scope.title = "Initial title set by Parent controller ctor function"
}])
.controller('ScopeInheritanceChildController', ['$scope', function ($scope) {
$scope.title = 'Initial title set by Child controller ctor function'
}])


So far so good and I get the output as:
enter image description here

Issue

When I comment
{{title}}
syntax and uncomment
ng-bind="title"
span I see the output as:
enter image description here


  1. Where is Child controller now?

  2. Why is it not displaying text box from Parent controller?



I know that
{{}}
syntax creates a watcher internally and thus angular is able to update view when expression changes. I also read that
ng-bind
is same as
{{}}
, so I would assume it works the same way.

Answer

span tag has such syntax

<span ng-bind='title'></span>