Partial view ng-click not working when using two different controller files

Question

I am working on MVC4 with angular JS and using ng-include to call a partial view inside my main view. Issue comes when I am trying to click a button inside my partial view.

I have two different controllers in angular, one for main and other one for a partial view both are working under same module.

My file structure is as follows

Scripts..

| --Main.js

|--ProjectPage.js

(Main.js)

var app = angular.module("Layout", []);
app.controller("LoadPage", function ($scope) {
    $scope.templateUrl = '/Home/DefaultPage';
};

(ProjectPage.js)

angular.module("Layout")
    .controller("CNTRL", function ($scope) {
    $scope.clickBtn1 = function () {
        alert("ABU");
    };
  });

and this is the HTML, I am using for partial page

<body ng-app="Layout" ng-controller="CNTRL">
<button ng-click="clickBtn1 ()" id="click">click</button>

The partial view is working fine when its called up independently(not inside the main view). No error is coming inside the browser but click event is not working.

why your partial html again contain an body tag? – Pankaj Parkar Jun 05 '15 at 06:37 — Pankaj Parkar, Jun 05 '15 at 06:37

score 1 · Accepted Answer · answered Jun 05 '15 at 07:12

1

The problem is probably because you are calling the "app" twice. Once in your layout (html) page and then in your partial page. You can fix this by replacing:

<body ng-app="newLayout" ng-controller="CNTRL">

With:

<div ng-controller="CNTRL">
  <!-- button code here -->

NOTE: The change from body to div (can be any html container tag) and removal of ng-app directive.

answered Jun 05 '15 at 07:12

Sylvan D Ash

1,047
13
24

It has started working but why we need to change the parent tag from body to div ? If I am keeping the ng-controller in my body its not working. – Rahul Jun 05 '15 at 07:17
You need to change the partial page's tag from `body` to `div` (or any other container tag e.g. `section`) because there's already a `body` tag in the layout file (if I'm not mistaken about MVC4). And you with html, you can only have 1 `body` tag. You also need to remove `ng-app` from the partial because like the `body` tag, you only need 1 `ng-app` directive – Sylvan D Ash Jun 05 '15 at 07:28

Uttam Panara · Answer 2 · 2015-06-05T07:02:01.237

0

Here! You have same module name so it will consider first one. Just different name both and it will works..

main.js

var app = angular.module("Layout", []);
app.controller("LoadPage", function ($scope) {
    $scope.templateUrl = '/Home/DefaultPage';
};

ProjectPage.js

angular.module("newLayout")
    .controller("CNTRL", function ($scope) {
    $scope.clickBtn1 = function () {
        alert("ABU");
    };
});

Body content

<body ng-app="newLayout" ng-controller="CNTRL">
<button ng-click="clickBtn1 ()" id="click">click</button>

edited Jun 05 '15 at 07:02

answered Jun 05 '15 at 06:45

Uttam Panara

541
2
10
28

I want to use the very same module. And if I use your code it will give me error as dependency is not defined for new module. Please have a look here you will get better understanding of what I am looking for. http://stackoverflow.com/questions/20087627/how-to-create-separate-angularjs-controller-files – Rahul Jun 05 '15 at 06:53
Just add app = angular.module("Layout", ['newLayout']); and angular.module("newLayout",[]) your error go.. – Uttam Panara Jun 05 '15 at 06:59
please check spelling mistake.. your code is proper but somewhere minor mistake of spelling in name... – Uttam Panara Jun 05 '15 at 07:18
Thank you for the help Uttam. – Rahul Jun 05 '15 at 07:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79741/discussion-between-uttam-panara-and-rahul). – Uttam Panara Jun 05 '15 at 07:21

Partial view ng-click not working when using two different controller files

2 Answers2