Tôi đang cố gắng thêm hai ứng dụng / mô-đun góc cạnh vào một trang. Trong các câu đố dưới đây, bạn có thể thấy rằng luôn chỉ có mô-đun đầu tiên, được tham chiếu trong mã html, sẽ hoạt động chính xác, trong khi mô-đun thứ hai không được nhận dạng bằng góc.
Trong fiddle này, chúng ta chỉ có thể thực thi doSearch2phương thức, trong khi trong fiddle này, chỉ doSearchphương thức hoạt động chính xác.
Tôi đang tìm cách đặt chính xác hai mô-đun góc vào một trang.
Câu trả lời:
Chỉ một ứng dụng AngularJS có thể được tự động khởi động trên mỗi tài liệu HTML. NgApp đầu tiên được tìm thấy trong tài liệu sẽ được sử dụng để xác định phần tử gốc để auto-bootstrap như một ứng dụng. Để chạy nhiều ứng dụng trong một tài liệu HTML, thay vào đó bạn phải khởi động chúng theo cách thủ công bằng cách sử dụng angle.bootstrap. Các ứng dụng AngularJS không thể được lồng vào nhau. - http://docs.angularjs.org/api/ng.directive:ngApp
Xem thêm
ng-app(vì nó sẽ không hoạt động). ng-appchỉ có thể được sử dụng một lần cho mỗi tài liệu HTML. Nó thực sự chỉ là một con đường tắt nếu bạn chỉ có một ứng dụng trên trang, đó là trường hợp bình thường.
Tôi đã tạo một chỉ thị thay thế không có ngAppgiới hạn. Nó được gọi là ngModule. Đây là những gì bạn mã sẽ trông như thế nào khi bạn sử dụng nó:
<!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>Bạn có thể lấy mã nguồn tại:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
Về cơ bản, nó giống như mã được AngularJS sử dụng nội bộ mà không có giới hạn.
Tại sao bạn muốn sử dụng nhiều [ng-app]? Vì Angular được tiếp tục bằng cách sử dụng các mô-đun, bạn có thể sử dụng một ứng dụng sử dụng nhiều phần phụ thuộc.
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>BIÊN TẬP
Hãy nhớ rằng nếu bạn muốn sử dụng bộ điều khiển bên trong bộ điều khiển, bạn phải sử dụng cú pháp controllerAs, như sau:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>Bạn có thể khởi động nhiều ứng dụng góc cạnh, nhưng:
1) Bạn cần khởi động chúng theo cách thủ công
2) Bạn không nên sử dụng "tài liệu" làm gốc, mà là nút chứa giao diện góc để:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);Điều này sẽ an toàn.
Khởi động thủ công cả hai mô-đun sẽ hoạt động. Nhìn này
<!-- 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']);
});Đây là liên kết đến Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
LƯU Ý: Trong html, không có ng-app. idđã được sử dụng thay thế.
Tôi đã tạo POC cho ứng dụng Angular bằng cách sử dụng nhiều mô-đun và bộ định tuyến để lồng các ứng dụng con trong một ứng dụng trang. Bạn có thể lấy mã nguồn tại: https://github.com/AhmedBahet/ng-sub-apps
Hy vọng điều này sẽ giúp
ng-app="project"và nói rằng "điều này cho phép bạn có các mô-đun chạy ở các phần khác nhau của trang" nhưng tài liệu ngApp tuyên bố rằng "chỉ có thể sử dụng một chỉ thị cho mỗi tài liệu HTML".