Bất cứ ai có thể giải thích sự khác biệt giữa $ scope và $ rootScope?
tôi nghĩ
Chúng ta có thể lấy thuộc tính ng-model trong bộ điều khiển cụ thể từ trang cụ thể bằng cách sử dụng điều này.
Chúng ta có thể lấy tất cả các thuộc tính ng-model trong bất kỳ bộ điều khiển nào từ bất kỳ trang nào bằng cách sử dụng điều này.
Điều này có chính xác? Hay bất cứ điều gì khác?
Câu trả lời:
"$ rootScope" là đối tượng cha của tất cả các đối tượng góc "$ scope" được tạo trong một trang web.
$ scope được tạo bằng ng-controllertrong khi $ rootcope được tạo bằng ng-app.
Sự khác biệt chính là tính khả dụng của thuộc tính được gán với đối tượng. Thuộc tính được gán với $scopekhông thể được sử dụng bên ngoài bộ điều khiển mà nó được định nghĩa trong khi thuộc tính được gán với $rootScopecó thể được sử dụng ở bất cứ đâu.
Ví dụ: Nếu trong ví dụ dưới đây, bạn thay thế $rootScopebằng $scopethuộc tính bộ phận sẽ không được điền từ bộ điều khiển đầu tiên trong bộ điều khiển thứ hai
angular.module('example', [])
.controller('GreetController', ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.name = 'World';
$rootScope.department = 'Angular';
}
])
.controller('ListController', ['$scope',
function($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}
]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="example">
<div class="show-scope-demo">
<div ng-controller="GreetController">
Hello {{name}}!
</div>
<div ng-controller="ListController">
<ol>
<li ng-repeat="name in names">{{name}} from {{department}}</li>
</ol>
</div>
</div>
</body>Theo Hướng dẫn về Phạm vi của Nhà phát triển Angular :
Mỗi ứng dụng Angular có chính xác một phạm vi gốc, nhưng có thể có một số phạm vi con. Ứng dụng có thể có nhiều phạm vi, bởi vì một số chỉ thị tạo phạm vi con mới (tham khảo tài liệu chỉ thị để xem chỉ thị nào tạo phạm vi mới). Khi phạm vi mới được tạo, chúng sẽ được thêm vào dưới dạng con của phạm vi cha của chúng. Điều này tạo ra một cấu trúc cây song song với DOM nơi chúng được gắn vào.
Cả bộ điều khiển và chỉ thị đều có tham chiếu đến phạm vi, nhưng không tham chiếu đến nhau. Sự sắp xếp này cách ly bộ điều khiển khỏi chỉ thị cũng như khỏi DOM. Đây là một điểm quan trọng vì nó làm cho bộ điều khiển xem bất khả tri, điều này giúp cải thiện đáng kể câu chuyện thử nghiệm của các ứng dụng.
Theo cách khác, chúng ta có thể nhìn vào điều này; $rootScopelà toàn cầu trong khi $scopelà cục bộ. Khi Controllerđược gán cho một trang, một $scopebiến có thể được sử dụng ở đây vì nó liên kết với bộ điều khiển này. Nhưng khi chúng tôi muốn chia sẻ giá trị của nó cho các bộ điều khiển hoặc dịch vụ khác, thì $rootScopenó đang được sử dụng (** có những cách thay thế, chúng tôi có thể chia sẻ các giá trị nhưng trong trường hợp này chúng tôi muốn sử dụng $rootScope).
Câu hỏi thứ hai của bạn về cách bạn định nghĩa hai từ đó là đúng.
Cuối cùng là một chút sai lệch, vui lòng sử dụng $rootScopecẩn thận. Tương tự như cách bạn sử dụng biến toàn cục, có thể khó gỡ lỗi và bạn có thể vô tình thay đổi biến toàn cục ở đâu đó bên trong bộ đếm thời gian hoặc điều gì đó khiến việc đọc của bạn không chính xác.
Mỗi ứng dụng đều có ít nhất một rootScope duy nhất và vòng đời của nó giống như ứng dụng và mọi bộ điều khiển đều có thể có phạm vi riêng, không được chia sẻ với người khác.
Hãy xem bài viết này:
Tôi khuyên bạn nên đọc tài liệu Angular chuyên sâu chính thức về phạm vi. Bắt đầu ở phần 'Phạm vi phân cấp':
https://docs.angularjs.org/guide/scope
Về cơ bản, $ rootScope và $ scope đều xác định các phần cụ thể của DOM trong đó
Bất kỳ thứ gì thuộc về $ rootScope đều có sẵn trên toàn cầu trên ứng dụng Angular của bạn, trong khi bất kỳ thứ gì thuộc về phạm vi $ đều có sẵn trong phần DOM mà phạm vi đó áp dụng.
$ RootScope được áp dụng cho phần tử DOM là phần tử gốc của ứng dụng Angular (do đó có tên là $ rootScope). Khi bạn thêm chỉ thị ng-app vào một phần tử của DOM, phần tử này sẽ trở thành phần tử gốc của DOM trong đó $ rootScope có sẵn. Nói cách khác, các thuộc tính, v.v. của $ rootScope sẽ có sẵn trong toàn bộ ứng dụng Angular của bạn.
Phạm vi Angular $ (và tất cả các biến và hoạt động của nó) có sẵn cho một tập hợp con cụ thể của DOM trong ứng dụng của bạn. Cụ thể, $ scope cho bất kỳ bộ điều khiển cụ thể nào có sẵn cho phần DOM mà bộ điều khiển cụ thể đó đã được áp dụng (sử dụng lệnh ng-controller). Mặc dù vậy, lưu ý rằng một số lệnh nhất định, ví dụ ng-repeat, khi được áp dụng trong một phần của DOM nơi bộ điều khiển đã được áp dụng, có thể tạo các phạm vi con của phạm vi chính - trong cùng một bộ điều khiển - một bộ điều khiển không nhất thiết chỉ chứa một phạm vi.
Nếu bạn nhìn vào HTML được tạo khi chạy ứng dụng Angular, bạn có thể dễ dàng thấy phần tử DOM nào 'chứa' phạm vi, vì Angular thêm lớp ng-scope trên bất kỳ phần tử nào mà phạm vi đã được áp dụng (bao gồm cả phần tử gốc của ứng dụng, có $ rootScope).
Nhân tiện, dấu '$' ở đầu $ scope và $ rootScope chỉ đơn giản là một mã định danh trong Angular cho những thứ được Angular dành riêng.
Lưu ý rằng việc sử dụng $ rootScope để chia sẻ các biến, v.v. giữa các mô-đun và bộ điều khiển thường không được coi là phương pháp hay nhất. Các nhà phát triển JavaScript nói về việc tránh 'ô nhiễm' phạm vi toàn cầu bằng cách chia sẻ các biến ở đó, vì có thể xảy ra xung đột sau này nếu một biến cùng tên được sử dụng ở một nơi khác mà nhà phát triển không nhận ra rằng nó đã được khai báo trên $ rootScope. Tầm quan trọng của điều này tăng lên theo quy mô của ứng dụng và nhóm phát triển nó. Lý tưởng nhất là $ rootScope sẽ chỉ chứa các hằng số hoặc các biến tĩnh, nhằm mục đích nhất quán mọi lúc trên ứng dụng. Một cách tốt hơn để chia sẻ nội dung giữa các mô-đun có thể là sử dụng các dịch vụ và nhà máy, đây là một chủ đề khác!
Cả hai đều là các đối tượng kịch bản Java và sự khác biệt được minh họa bằng sơ đồ như bên dưới.
NTB:
Ứng dụng góc cạnh đầu tiên cố gắng tìm thuộc tính của bất kỳ mô hình hoặc chức năng nào trong $ scope, nếu nó không tìm thấy thuộc tính trong $ scope, thì nó sẽ tìm kiếm trong phạm vi chính trong hệ thống phân cấp trên. Nếu thuộc tính vẫn không được tìm thấy trong phân cấp trên thì góc sẽ cố gắng giải quyết trong $ rootcope.
Các kiểu mới, như AngularJS Styleguide của John Papa , đang gợi ý rằng chúng ta không nên sử dụng $scopeđể lưu các thuộc tính của trang hiện tại. Thay vào đó, chúng ta nên sử dụngcontrollerAs with vm cách tiếp cận mà chế độ xem liên kết với chính đối tượng bộ điều khiển. Sau đó, sử dụng một biến nắm bắt cho việc này khi sử dụng cú pháp controllerAs. Chọn một tên biến nhất quán chẳng hạn như vm, viết tắt của ViewModel.
Tuy nhiên, bạn vẫn sẽ cần đến $scopekhả năng xem của nó.