Currently, I am developing a project using MVC4 with angular JS and implementing ng-include to incorporate a partial view within my main view. I have encountered an issue when attempting to click a button located in the partial view.
In my setup, there are two separate controllers in angular - one for the main view and another for the partial view, both operating within the same module.
The structure of my files is organized 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");
};
});
Here is the HTML code I am utilizing for the partial page:
<body ng-app="Layout" ng-controller="CNTRL">
<button ng-click="clickBtn1()" id="click">click</button>
When the partial view is accessed independently (not nested within the main view), it functions correctly without any errors appearing in the browser. However, the click event does not trigger as expected.