Question

我正在使用角度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>

部分视图在独立调用时（不在主视图中）正常工作。浏览器内没有错误，但点击事件无效。

Answer 1

问题可能是因为您正在调用＆＃34; app＆＃34;两次。进入布局（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>