Use nested controllers in ngRoute - AngularJS

Question

I have this in main.html:

<div ng-controller="MainCtrl">
 <form ng-controller="SearchCtrl">
  <input ng-model="query" ng-change="changed(query)" />
 </form>
</div>

And, index.html:

<html>
<head>
    <title>Dashboard</title>
</head>
<body ng-app="MyApp">
 <nav ng-controller="NavCtrl">
 ...
 </nav>
 <div ng-view></div>
</body>
</html>

And, my ngRoute config is as follows:

module.config(function($routeProvider)){
 $routeProvider.when('/', {
  templateUrl: 'views/main.html',
  controller: 'SearchCtrl'
 });
}

I tried accessing $scope.$parent in SearchCtrl.js looking for $scope of MainCtrl but I am getting undefined.

I tried changing the controller in my config but then, I am not able to access SearchCtrl. What should I do?

There shouldn't be a <body> in a route template. Also you would have 2 instances of SearchCtrl with code shown ... one nested inside the other — charlietfl
– charlietfl, Commented Jan 30, 2016 at 17:05
@charlietfl Yeah. So what do I do to make sure I have both controllers nested? Thanks. — Faizuddin Mohammed
– Faizuddin Mohammed, Commented Jan 31, 2016 at 2:16

charlietfl · Accepted Answer · 2016-01-31 02:27:19Z

1

Based on structure shown everything inside ng-view will be in controller set by the route config .... SearchCtrl.

Then inside would be MainCtrl and inside that another (new instance) of SearchCtrl

So should probably change route controller to MainCtrl and remove ng-controller="MainCtrl"

module.config(function($routeProvider)){
 $routeProvider.when('/', {
  templateUrl: 'views/main.html',
  controller: 'MainCtrl'
 });
}

main.html

<div>
 <form ng-controller="SearchCtrl">
  <input ng-model="query" ng-change="changed(query)" />
 </form>
</div>

answered Jan 31, 2016 at 2:27

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Siva · Accepted Answer · 2016-01-31 02:40:05Z

1

The main.html already in SearchCtrl scope and you don't need to define the scope again in the view.

Then, defining MainCtrl inside main.html which is under "SearchCtrl" scope will not take MainCtrl as its parent.

Hence remove both controller from main.html

 <form>
 <input ng-model="query" ng-change="changed(query)" />
</form>

Now in index.html, put the MainCtrl as parent to ng-view

.......
<div ng-controller="MainCtrl">
 <div ng-view></div>
</div>
.......

Now try accessing $scope.$parent in your SearchCtrl then you could see it.

answered Jan 31, 2016 at 2:40

Siva

2,81518 silver badges14 bronze badges

1 Comment

Faizuddin Mohammed Over a year ago

But what if I want MainCtrl only for this particular view? Thanks!

Collectives™ on Stack Overflow

Use nested controllers in ngRoute - AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related