Question

我试图在角度

的页面中使用多个模块

HTML

<!DOCTYPE HTML>
<HTML >
<HEAD>
<TITLE>
ANGULAR
</TITLE>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
</HEAD>
<BODY>
    <script src="js/angular.min.js"></script>
    <script src="js/ngModule.js"></script>
    <script src="js/App.js"></script>
     <div ng-app="AssociateDetails">
            <div ng-controller="AssociateController as associateData">
                    <div ng-repeat="associate in associateData.details">
                         <h1>{{associate.Name}}</h1>
                         <h2>{{associate.Id}}</h2>
                    </div>
           </div>
    </div>
    <div id="SalaryDiv" ng-app="SalaryDetails">
    <div ng-controller="SalaryController as sal">
       <div ng-repeat="salaryDetail in sal.data">
           <p>{{salaryDetail.Name}}</p>
           <p>{{salaryDetail.Salary}}</p>

       </div>

    </div>
    </div>
</BODY>
</HTML>

JS

(function () {
    var app = angular.module("AssociateDetails", []);
    var associatesDetails = [
        { Name: "sdfsd", Id: 123, Alloted: true },
        { Name: "dgfdf", Id: 345, Alloted: true },
        { Name: "sdf", Id: 564, Alloted: true }
    ];
    app.controller("AssociateController", function () {
        this.details = associatesDetails;
    });

    var salary = angular.module("SalaryDetails", []);
    var salaryDetails = [
        { Name: "ssss", Salary: 30000 },
        { Name: "asvs", Salary: 90000 },
        { Name: "sdfd", Salary: 87000 }
    ];
    salary.controller("SalaryController", function () {
        this.data = salaryDetails;
    });
    angular.bootstrap(document.getElementById("SalaryDiv"), ['SalaryController']);
}());

第一个正在运行并且正在显示数据，但ID为SalaryDiv的div无效

Answer 1

每页只能放置一个ng-app。如果你想要多个ng-app，你需要手动引导。而且你不需要在html中写“ng-app”。只需在html中删除第二个ng-app并更改你的bootstrap语句如下：

angular.bootstrap(document.getElementById("SalaryDiv"),"SalaryDetails");

Bootstrap第二个参数应该是moudle名称，而不是控制器。

angular.bootstrap不工作

1 个答案: