Post
Ask Question
mohan gowtham

mohan gowtham

  • NA
  • 23
  • 2.7k

sub controller inside a parent controller

Feb 12 2018 3:49 AM
here what am i doing wrong??first three messages are shown,but when it comes to sub controller it is not displaying the required output
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="scope.aspx.cs" Inherits="angularpractice.scope" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/angular.min.js"></script>
<style type="text/css">
body {
font-family: Algerian;
font-size: 30px;
}
.class1 {
margin: 10px;
padding: 10px;
background-color: aqua;
}
.class2 {
margin: 10px;
padding: 10px;
background-color: burlywood;
}
.class3 {
margin: 10px;
padding: 10px;
background-color: cadetblue;
}
</style>
<title>Angular js model inside model</title>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.run(function ($rootScope)
{
$rootScope.message = "Message from root controller";
});
app.controller("mycontroller", function ($scope, $rootScope)
{
$scope.message = "message from parent controller";
});
app.controller1("mycontroller1", function ($scope, $rootScope)
{
$scope.message = "message from sub controller";
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myapp" class="class1">
<p>{{message}}</p>
<div ng-controller="mycontroller" class="class2">
<p>{{message}}</p>
<p>{{$root.message}}</p>
<div ng-controller="mycontroller1" class="class3">
<p>{{message}}</p>
<p>{{$root.message}}</p>
</div>
<p>{{message}}</p>
<p>{{$root.message}}</p>
</div>
<p>{{message}}</p>
</div>
</form>
</body>
</html>
 

Answers (1)