堆棧內存溢出
  簡體   English   中英

$scope 和 $rootScope 的區別

[英]Difference between $scope and $rootScope

 原文  2014-04-01 12:22:01  2   9    javascript/ angularjs

問題描述

誰能解釋 $scope 和 $rootScope 之間的區別？

我認為

$范圍：

我們可以通過使用它從特定頁面獲取特定控制器中的 ng-model 屬性。

$rootScope

通過使用它，我們可以從任何頁面獲取任何控制器中的所有 ng-model 屬性。

這樣對嗎？ 或者別的什么？

9 個解決方案

解決方案1
 90  2016-02-22 12:08:05

“$rootScope”是在網頁中創建的所有“$scope”角度對象的父對象。

在此處輸入圖片說明

$scope 是用ng-controller創建的，而 $rootscope 是用ng-app創建的。

在此處輸入圖片說明

解決方案2
 70  2015-07-13 14:52:05

主要區別在於分配給對象的屬性的可用性。 用$scope分配的屬性不能在定義它的控制器之外使用，而用$rootScope分配的屬性可以在任何地方使用。

示例：如果在下面的示例中，您將$rootScope替換$rootScope $scope ，則不會從第二個控制器中的第一個控制器填充部門屬性

 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>

解決方案3
 18  2014-04-01 12:57:56

根據 Angular's Developer's Guide to Scopes ：

每個 Angular 應用程序只有一個根作用域，但可能有多個子作用域。 應用程序可以有多個作用域，因為某些指令會創建新的子作用域（請參閱指令文檔以查看哪些指令會創建新的作用域）。 創建新作用域時，它們將作為其父作用域的子項添加。 這將創建一個樹結構，該結構與它們所附加的 DOM 平行。

控制器和指令都引用了作用域，但彼此之間沒有引用。 這種安排將控制器與指令以及 DOM 隔離開來。 這一點很重要，因為它使控制器與視圖無關，從而大大改善了應用程序的測試故事。

解決方案4
 15  2014-04-01 12:50:58

$rootScope全局可用，無論您在哪個控制器中，而$scope僅對當前控制器及其子控制器可用。

解決方案5
 3  2017-03-06 20:19:19

換句話說，我們可以看看這個； $rootScope是全局的，而$scope是本地的。 當Controller被分配給一個頁面時，這里可以使用$scope變量，因為它綁定到這個控制器。 但是當我們想將它的值共享給其他控制器或服務時，就會使用$rootScope （**有其他方法，我們可以共享值，但在這種情況下我們想使用$rootScope ）。

關於如何定義這兩個詞的第二個問題是正確的。

最后有點偏離軌道，請小心使用$rootScope 。 與您使用全局變量的方式類似，調試起來可能會很痛苦，並且您可能會不小心更改計時器內某處的全局變量或使您的閱讀不正確的東西。

解決方案6
 2  2014-04-01 12:56:11

每個應用程序至少有一個 rootScope 並且其生命周期與應用程序相同，每個控制器都可以擁有自己的范圍，不與其他人共享。

看看這篇文章：

https://github.com/angular/angular.js/wiki/Understanding-Scopes

解決方案7
 2  2017-04-13 11:28:05

我建議您閱讀有關范圍的官方深入 Angular 文檔。 從“范圍層次結構”部分開始：

https://docs.angularjs.org/guide/scope

本質上，$rootScope 和 $scope 都標識了 DOM 的特定部分，其中

  • 進行角度操作
  • 聲明為 $rootScope 或 $scope 一部分的變量可用

屬於 $rootScope 的任何內容都可以在您的 Angular 應用程序中全局使用，而屬於 $scope 的任何內容都可以在該范圍適用的 DOM 部分中使用。

$rootScope 應用於作為 Angular 應用程序根元素的 DOM 元素（因此名稱為 $rootScope）。 當您將 ng-app 指令添加到 DOM 的元素時，這將成為 $rootScope 可用的 DOM 的根元素。 換句話說， $rootScope 的屬性等將在整個 Angular 應用程序中可用。

Angular $scope（及其所有變量和操作）可用於應用程序中 DOM 的特定子集。 具體來說，任何特定控制器的 $scope 可用於應用該特定控制器的 DOM 部分（使用 ng-controller 指令）。 請注意，盡管某些指令（例如 ng-repeat）在應用了控制器的 DOM 部分中應用時，可以創建主范圍的子范圍——在同一個控制器內——一個控制器不一定只包含一個范圍。

如果你在運行你的 Angular 應用程序時查看生成的 HTML，你可以很容易地看到哪些 DOM 元素“包含”了一個范圍，因為 Angular 在任何應用了范圍的元素（包括根元素）上添加了類 ng-scope的應用程序，它具有 $rootScope）。

順便說一下，$scope 和 $rootScope 開頭的“$”符號只是 Angular 中用於 Angular 保留的內容的標識符。

請注意，使用 $rootScope 在模塊和控制器之間共享變量等通常不被認為是最佳實踐。 JavaScript 開發人員談論通過在那里共享變量來避免對全局范圍的“污染”，因為如果在其他地方使用同名變量，那么稍后可能會發生沖突，而開發人員沒有意識到它已經在 $rootScope 上聲明。 這一點的重要性隨着應用程序的規模和開發它的團隊而增加。 理想情況下， $rootScope 將只包含常量或靜態變量，它們旨在在整個應用程序中始終保持一致。 跨模塊共享東西的更好方法可能是使用服務和工廠，這是另一個主題！

解決方案8
 2  2018-05-01 08:15:38

兩者都是 Java 腳本對象，區別如下圖所示。

在此處輸入圖片說明

非關稅壁壘：
第一個 angular 應用程序嘗試在 $scope 中查找任何模型或函數的屬性，如果在 $scope 中找不到該屬性，則它在上層層次結構的父作用域中搜索。 如果在上層層次中仍未找到該屬性，則 angular 會嘗試在 $rootscope 中解析。

解決方案9
 1  2016-10-29 00:19:58

新樣式，如John Papa 的 AngularJS Styleguide ，建議我們根本不應該使用$scope來保存當前頁面的屬性。 相反，我們應該使用controllerAs with vm方法，其中視圖綁定到控制器對象本身。 然后在使用 controllerAs 語法時為此使用捕獲變量。 選擇一致的變量名稱，例如 vm，代表 ViewModel。

不過，您仍然需要$scope來查看其觀看功能。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 $ scope。$ root和$ rootScope有什么區別？ $ scope。$ emit和$ rootScope。$ emit有什么區別？ $ rootScope和$ rootScope。$ root之間的區別 AngularJS在$ rootScope和$ scope之間選擇 AngularJS中的$ rootScope和$ rootScope。$ emit / $ broadcast有什么區別？ $ document.ready和$ rootScope。$ on（&#39;$ viewContentLoaded&#39;）有什么區別？ $ rootScope和$ scope，共享庫 根鏡vs范圍angularJs $ scope和$ rootscope的混淆 詞法scope代碼的區別
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM