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
– Pankaj Parkar

2015-06-05 06:37:19 +00:00
Commented Jun 5, 2015 at 6:37 — Pankaj Parkar
– Pankaj Parkar, Commented Jun 5, 2015 at 6:37

Sylvan D Ash · Accepted Answer · 2015-06-05 07:12:00Z

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 5, 2015 at 7:12

Sylvan D Ash

1,13714 silver badges24 bronze badges

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

2 Comments

Rahul Over a year ago

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.

Sylvan D Ash Over a year ago

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

Uttam Panara · Accepted Answer · 2015-06-05 07:02:01Z

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 5, 2015 at 7:02

answered Jun 5, 2015 at 6:45

Uttam Panara

5592 gold badges10 silver badges28 bronze badges

4 Comments

Rahul Over a year ago

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. stackoverflow.com/questions/20087627/…

Uttam Panara Over a year ago

Just add app = angular.module("Layout", ['newLayout']); and angular.module("newLayout",[]) your error go..

Uttam Panara Over a year ago

please check spelling mistake.. your code is proper but somewhere minor mistake of spelling in name...

Uttam Panara Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related