Controller nesting Effect:
Principle:
Child scopes access the parent scope property to add content.
Code:
1 <!DOCTYPE HTML>2 <HTMLNg-app= "App">3 <Head><Scriptsrc= "./angular.min.js"></Script></Head>4 <Body>5 <H1>Controller nesting</H1>6 <DivNg-controller= "Parentcontroller"style= "border:1px solid black">7 <span>{{person}}</span>8 <DivNg-controller= "Childcontroller"style= "border:1px solid red">9 <aNg-click= "AddName ()">I Add a name</a>Ten </Div> One </Div> A </Div> - <Scripttype= "Text/javascript"> - varapp=Angular.module ("app",[]); the App.controller ('Parentcontroller', function($scope) { - $scope. person= { - Age : the - }; + }); - App.controller ('Childcontroller',function($scope) { + $scope. LadyGaga="LadyGaga"; A $scope. AddName= function(){ at $scope. Person.name=$scope. LadyGaga; - } - }); - </Script> - </Body> - </HTML>
Angularjs Getting Started 4-small example-controller nesting