使用两个不同的控制器文件时，局部视图ng-click不起作用

Question

我正在使用Angular JS开发MVC4，并使用ng-include调用主视图内的局部视图。 当我尝试单击局部视图内的按钮时出现问题。

我有两个角度不同的控制器，一个用于主控制器，另一个用于局部视图，两者都在同一模块下工作。

我的文件结构如下

脚本..

| --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");
    };
  });

这是HTML，我正在使用部分页面

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

当单独调用局部视图时，局部视图工作正常（不在主视图内部）。 浏览器内部没有错误，但click事件不起作用。

Answer 1

问题可能是因为您两次调用“应用程序”。 进入布局（html）页面，然后进入部分页面。 您可以通过以下方式解决此问题：

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

附：

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

注意：从body更改为div （可以是任何html容器标记），并删除了ng-app指令。

Answer 2

这里！ 您具有相同的模块名称，因此它将考虑第一个。 两者都有不同的名称，它将起作用。

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 ng-app="newLayout" ng-controller="CNTRL">
<button ng-click="clickBtn1 ()" id="click">click</button>