0

I have a common Layout page where I am calling the _header partial page and then rendering body. In render body, I have several index pages which have its own ng-controller. When I create ng-controller for _header partial, I am not able to get those scope values rather I am getting {{header.label}} in the body part.

How to have separate module and controller for partial page and for the body. I think ng-app and ng-controller is what made some issue. Any help is appreciated.

This is inside my tag

<div>
        @Html.Partial("_Header")
    </div>

@RenderBody()
Kaustubh Khare
  • 3,280
  • 2
  • 32
  • 48
Suganya
  • 36
  • 1

2 Answers2

0

If your ng-controller is inside the @RenderBody your $scope and controller have no effect outside this tag.

The $rootScope is shared between controllers, but i see this as a bad practice.

If you want, you can nest controllers but you have to use the "as" word to refer the controllers

Or you can create a directive with his own controller

Pablo Alaman
  • 1
  • 3
  • You mean to say i should add `ng-app` in Layout page and `ng-controller` in partial page _header. Also, the controller used inside Renderbody page and partial page does not communicate each other? – Suganya Jul 10 '18 at 08:27
  • ng-app should be wrapping all the controllers (body,html tags for example) then inside your header partial wrap everything with a ng-controller tag. Wrap your page inside RenderBody with another ng-controller. In a controller. If you do $scope.a = "hello". {{a}} only will display "hello" between the tags that define the controller. Controllers can communicate each other you can look for different ways (there are many) – Pablo Alaman Jul 10 '18 at 11:01
  • I have modified like this. Still not working. Where exactly should i call the external javascript file. `
    @Html.Partial("_Header")
    @RenderBody() `     – Suganya Jul 10 '18 at 11:40
0

you may be already doing this but since the question does not mention this, you have two controllers like one which is loaded from you header and other from the RenderBody:

<div class="header" ng-controller="headerController">
    [other html here]
</div>

<div class="body" ng-controller="bodyController">
    [other html here]
</div>

You do need to add controllers for the these too and this should work as is. Your ng-app needs to be added at a parent level could be in the _Layout.cshtml page.

Arun James
  • 88
  • 6
  • Should i need to add ng-controller and ng-app in _Layout.cshtml page itself? The ng-app name should be same across the partial and renderbody pages, isn't? – Suganya Jul 10 '18 at 08:38