使用兩個不同的控制器文件時，局部視圖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>