ฉันกำลังพยายามเพิ่มแอพ / โมดูลเชิงมุมสองตัวในหน้าเดียว ใน fiddles ด้านล่างคุณจะเห็นว่าเฉพาะโมดูลแรกที่อ้างอิงในโค้ด html เท่านั้นที่จะทำงานได้อย่างถูกต้องในขณะที่มุมที่สองไม่รู้จัก
ในซอนี้เราสามารถดำเนินการตามdoSearch2วิธีการเท่านั้นในขณะที่ในซอนี้doSearchวิธีการเท่านั้นที่ทำงานได้อย่างถูกต้อง
ฉันกำลังมองหาวิธีการวางโมดูลเชิงมุมสองโมดูลให้ถูกต้องในหน้าเดียว
คำตอบ:
AngularJS แอปพลิเคชันเดียวเท่านั้นที่สามารถบูตอัตโนมัติต่อเอกสาร HTML ngApp แรกที่พบในเอกสารจะถูกใช้เพื่อกำหนดองค์ประกอบรูทเพื่อบูตอัตโนมัติเป็นแอปพลิเคชัน ในการเรียกใช้หลายแอปพลิเคชันในเอกสาร HTML คุณต้องบูตสแตรปด้วยตนเองโดยใช้ angular.bootstrap แทน แอปพลิเคชัน AngularJS ไม่สามารถซ้อนกันภายใน - http://docs.angularjs.org/api/ng.directive:ngApp
ดูสิ่งนี้ด้วย
ng-app(เพราะมันใช้ไม่ได้) ng-appสามารถใช้ได้เพียงครั้งเดียวต่อเอกสาร HTML มันเป็นเพียงการตัดบทหากคุณมีแอปเดียวในหน้าเว็บซึ่งเป็นกรณีปกติ
ฉันสร้างคำสั่งทางเลือกที่ไม่มีngAppข้อ จำกัด เรียกว่าngModule. นี่คือลักษณะของโค้ดที่คุณใช้เมื่อคุณใช้งาน:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>คุณสามารถรับซอร์สโค้ดได้ที่:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
โดยพื้นฐานแล้วเป็นรหัสเดียวกับที่ AngularJS ใช้ภายในโดยไม่มีข้อ จำกัด
ทำไมคุณถึงต้องการใช้ [ng-app] หลายตัว เนื่องจาก Angular กลับมาทำงานอีกครั้งโดยใช้โมดูลคุณจึงสามารถใช้แอพที่ใช้การอ้างอิงหลายตัวได้
javascript:
// setter syntax -> initializing other module for demonstration
angular.module('otherModule', []);
angular.module('app', ['otherModule'])
.controller('AppController', function () {
// ...do something
});
// getter syntax
angular.module('otherModule')
.controller('OtherController', function () {
// ...do something
});HTML:
<div ng-app="app">
<div ng-controller="AppController">...</div>
<div ng-controller="OtherController">...</div>
</div>แก้ไข
โปรดทราบว่าหากคุณต้องการใช้คอนโทรลเลอร์ภายในคอนโทรลเลอร์คุณต้องใช้ไวยากรณ์ของคอนโทรลเลอร์ดังนี้:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>คุณสามารถบูตแอปพลิเคชั่นเชิงมุมได้หลายตัว แต่:
1) คุณต้องบูตด้วยตนเอง
2) คุณไม่ควรใช้ "document" เป็นรูท แต่โหนดที่มีอินเทอร์เฟซเชิงมุมสำหรับ:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);นี้จะปลอดภัย
การบูตด้วยตนเองทั้งสองโมดูลจะทำงาน ดูนี่สิ
<!-- IN HTML -->
<div id="dvFirst">
<div ng-controller="FirstController">
<p>1: {{ desc }}</p>
</div>
</div>
<div id="dvSecond">
<div ng-controller="SecondController ">
<p>2: {{ desc }}</p>
</div>
</div>
// IN SCRIPT
var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');
angular.element(document).ready(function() {
angular.bootstrap(dvFirst, ['firstApp']);
angular.bootstrap(dvSecond, ['secondApp']);
});นี่คือลิงค์ไปยัง Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
หมายเหตุ:ใน html ไม่มีng-appไฟล์. idถูกนำมาใช้แทน
ฉันสร้าง POC สำหรับแอปพลิเคชันเชิงมุมโดยใช้โมดูลและเราเตอร์หลายตัวเพื่อซ้อนแอปย่อยในแอปหน้าเดียว คุณสามารถรับซอร์สโค้ดได้ที่: https://github.com/AhmedBahet/ng-sub-apps
หวังว่านี่จะช่วยได้
ng-app="project"และระบุว่า "สิ่งนี้ช่วยให้คุณมีโมดูลที่ทำงานในส่วนต่างๆของหน้า" แต่เอกสาร ngApp ระบุว่า "สามารถใช้ได้เพียงคำสั่งเดียวต่อเอกสาร HTML"