blocks|key|156983|text|无论您在哪个控制器中，$rootScope都是全局可用的，而$scope仅对当前控制器及其子控制器可用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|156984|entityMap^0|B|A|U|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p><code>$rootScope</code> is available globally, no matter what controller you are in, whereas <code>$scope</code> is only available to the current controller and it's children.</p>


blocks|key|2960780|text|每个应用程序至少有一个单独的rootScope，它的生命周期与应用程序相同，每个控制器都可以有自己的作用域，不能与其他控制器共享。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2960781|看看这篇文章：|2960782|https://github.com/angular/angular.js/wiki/Understanding-Scopes|offset|length|2960783|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1R|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

<p>Every application has atleast one single rootScope and its lifecycle is the same as the app and  every controller can have it's own scope, that is not shared with others.</p>

<p>Have a look at this article : </p>

<p><a href="https://github.com/angular/angular.js/wiki/Understanding-Scopes" rel="nofollow">https://github.com/angular/angular.js/wiki/Understanding-Scopes</a></p>


blocks|key|2748247|text|根据Angular的Developer's+Guide+to+Scopes|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2748248|2748249|每个Angular应用程序只有一个根作用域，但可能有几个子作用域。应用程序可以有多个作用域，因为有些指令会创建新的子作用域(请参阅指令文档了解哪些指令会创建新的作用域)。当创建新的作用域时，它们被添加为其父作用域的子级。这创建了一个树结构，它与DOM并列在一起。|blockquote|2748250|2748251|控制器和指令都引用了作用域，但彼此之间没有引用。这种安排将控制器与指令以及DOM隔离开来。这一点很重要，因为它使控制器视图不可知，这极大地改善了应用程序的测试情况。|2748252|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/guide/scope^0|A|R|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|-4|5|6|7|W|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|X|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>According to Angular's <a href="http://docs.angularjs.org/guide/scope" rel="noreferrer">Developer's Guide to Scopes</a>:</p>
<blockquote>
<p>Each Angular application has exactly one root scope, but may have several child scopes. The application can have multiple scopes, because some directives create new child scopes (refer to directive documentation to see which directives create new scopes). When new scopes are created, they are added as children of their parent scope. This creates a tree structure which parallels the DOM where they're attached.</p>
<p>Both controllers and directives have reference to the scope, but not to each other. This arrangement isolates the controller from the directive as well as from DOM. This is an important point since it makes the controllers view agnostic, which greatly improves the testing story of the applications.</p>
</blockquote>


blocks|key|2960900|text|主要区别在于与对象一起分配的属性的可用性。使用$scope分配的属性不能在定义它的控制器之外使用，而使用$rootScope分配的属性可以在任何地方使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2960901|示例:如果在下面的示例中将$rootScope替换为$scope，则不会从第二个控制器中的第一个控制器填充部门属性|2960902|​|2960903|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'];
++++}
++]);|code-block|syntax|javascript|2960904|<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>|2960905|2960906|entityMap^0|N|6|1G|A|0|D|A|Q|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|16|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|S|$]]

<p>The main difference is the availability of the property assigned with the object. A property assigned with <code>$scope</code> cannot be used outside the controller in which it is defined whereas a property assigned with <code>$rootScope</code> can be used anywhere.</p>

<p>Example: If in the example below you replace <code>$rootScope</code> with <code>$scope</code> the department property will not be populated from the first controller in the second one</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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'];
    }
  ]);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;

&lt;body ng-app="example"&gt;
  &lt;div class="show-scope-demo"&gt;
    &lt;div ng-controller="GreetController"&gt;
      Hello {{name}}!
    &lt;/div&gt;
    &lt;div ng-controller="ListController"&gt;
      &lt;ol&gt;
        &lt;li ng-repeat="name in names"&gt;{{name}} from {{department}}&lt;/li&gt;
      &lt;/ol&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2748282|text|“$rootScope”是在网页中创建的所有“$scope”angular对象的父对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2748283|​|2748284|📷|atomic|offset|length|2748285|2748286|$scope是用ng-controller创建的，$rootscope是用ng-app创建的。|style|CODE|2748287|2748288|2748289|2748290|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/159ea1a243668a25ef128ed19fa9e8c0.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/ecc87c7bacb26565a8743d7f6f3724eb.png^0|0|0|0|1|0|0|0|8|D|11|6|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@$G|14|H|15|1|16]]|A|$]]|$1|I|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@$G|19|H|1A|L|M]|$G|1B|H|1C|L|M]]|9|@]|A|$]]|$1|N|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|E|5|F|7|1E|8|@]|9|@$G|1F|H|1G|1|1H]]|A|$]]|$1|P|3|C|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]|Z|$5|T|U|V|A|$W|10|Y|-4]]]]

<p>"$rootScope” is a parent object of all “$scope” angular objects created in a web page.</p>

<p><a href="https://i.stack.imgur.com/udxZu.png"><img src="https://i.stack.imgur.com/udxZu.png" alt="enter image description here"></a></p>

<p>$scope is created with <code>ng-controller</code> while $rootscope is created with <code>ng-app</code>.</p>

<p><a href="https://i.stack.imgur.com/xfzb0.png"><img src="https://i.stack.imgur.com/xfzb0.png" alt="enter image description here"></a></p>


blocks|key|159406|text|新的样式，如John+Papa's+AngularJS+Styleguide，建议我们根本不应该使用$scope来保存当前页面的属性。相反，我们应该使用视图绑定到控制器对象本身的controllerAs+with+vm方法。然后在使用controllerAs语法时为此使用一个捕获变量。选择一个一致的变量名，比如vm，它代表ViewModel。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|159407|不过，您仍然需要$scope来实现它的监视功能。|159408|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/johnpapa/angular-styleguide/tree/master/a1#style-y032^0|1E|6|2H|K|6|W|0|0|8|6|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>New styles, like <a href="https://github.com/johnpapa/angular-styleguide/tree/master/a1#style-y032" rel="nofollow">John Papa's AngularJS Styleguide</a>, are suggesting that we shouldn't be using <code>$scope</code> to save current page's properties at all. Instead we should use the <code>controllerAs with vm</code> approach where the view binds to the controller object itself. Then use a capture variable for this when using the controllerAs syntax. Choose a consistent variable name such as vm, which stands for ViewModel. </p>

<p>You will still need the <code>$scope</code> for its watching capabilities though. </p>


blocks|key|2960972|text|换句话说，我们可以这样看：$rootScope是全局的，而$scope是局部的。当Controller被分配给一个页面时，这里可以使用$scope变量，因为它绑定到这个控制器。但是，当我们想要在其他控制器或服务之间共享它的价值时，就会使用$rootScope+(**还有其他方法，我们可以在之间共享价值，但在这种情况下，我们希望使用$rootScope)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2960973|你关于如何定义这两个词的第二个问题是正确的。|2960974|最后一点问题，请谨慎使用$rootScope。类似于你使用全局变量的方式，调试起来可能很痛苦，而且你可能不小心改变了计时器中的全局变量，或者其他什么东西，使得你的读数不正确。|2960975|entityMap^0|D|A|T|6|15|A|1V|6|3B|A|4M|A|0|0|C|A|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|K|$]]

<p>In other way we can look at this; <code>$rootScope</code> is global while <code>$scope</code> is local. When <code>Controller</code> is assigned to a page, so a <code>$scope</code> variable can be use here because it binds to this controller. But when we want to share its value across to other controllers or services, then <code>$rootScope</code> is being used (**there are alternative ways, we can share values across but in this case we want to use <code>$rootScope</code>).</p>

<p>Your second question about how you define those two words are correct. </p>

<p>Lastly a bit off track, please use <code>$rootScope</code> with care. Similar to the way you use global variables, can be a pain to debug and you may accidentally change the global variable somewhere inside a timer or something which makes your reading incorrect.</p>


blocks|key|2748382|text|我建议您阅读有关作用域的官方深入Angular文档。从“Scope+Hierarchies”部分开始：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2748383|https://docs.angularjs.org/guide/scope|offset|length|2748384|本质上，$rootScope和$scope都标识DOM的特定部分，|2748385|执行|2748386|角度操作声明为$rootScope或$scope的一部分的|unordered-list-item|2748387|变量可用于|2748388|2748389|属于$rootScope的任何东西都可以在整个Angular应用程序中全局使用，而属于$scope的任何东西都可以在该作用域适用的DOM部分中使用。|2748390|$rootScope应用于DOM元素，该元素是Angular应用程序的根元素(因此得名为$rootScope)。当您将ng-app指令添加到DOM的一个元素中时，它将成为DOM的根元素，在这个根元素中可以使用$rootScope。换句话说，$rootScope的属性等将在整个Angular应用程序中可用。|2748391|Angular+$scope+(以及它的所有变量和操作)可用于应用程序中DOM的特定子集。具体地说，任何特定控制器的控制器都可用于应用该特定控制器的DOM部分(使用ng-+$scope指令)。但请注意，某些指令，例如ng-repeat，当应用于DOM中应用了控制器的部分时，可以创建主作用域的子作用域-在同一控制器内-控制器不一定只包含一个作用域。|2748392|如果您在运行Angular应用程序时查看生成的超文本标记语言，您可以很容易地看到哪些DOM元素“包含”了作用域，因为Angular在任何应用了作用域的元素上添加了ng-scope类(包括应用程序的根元素，它具有$rootScope)。|2748393|顺便说一下，$scope和$rootScope开头的'$‘符号只是Angular中由Angular保留的内容的标识符。|2748394|请注意，使用$rootScope在模块和控制器之间共享变量等通常不被认为是最佳实践。JavaScript开发人员谈论通过共享变量来避免全局作用域的“污染”，因为如果在其他地方使用相同名称的变量，而开发人员没有意识到它已经在$rootScope上声明了，那么以后可能会发生冲突。这一点的重要性随着应用程序的规模和开发团队的增加而增加。理想情况下，$rootScope将只包含常量或静态变量，这些常量或静态变量旨在在整个应用程序中始终保持一致。跨模块共享内容的更好方法可能是使用服务和工厂，这是另一个主题！|2748395|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|12|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1E|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1F|8|@]|9|@]|A|$]]|$1|M|3|N|5|L|7|1G|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1I|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1J|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1K|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1L|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1N|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|C]]]]

<p>I recommend you read the official in-depth Angular documentation for scopes. Start at the section 'Scope Hierarchies':</p>

<p><a href="https://docs.angularjs.org/guide/scope" rel="nofollow noreferrer">https://docs.angularjs.org/guide/scope</a></p>

<p>Essentially, $rootScope and $scope both identify specific parts of the DOM within which</p>

<ul>
<li>Angular operations are carried out</li>
<li>variables declared as part of either the $rootScope or $scope are available</li>
</ul>

<p>Anything that belongs to the $rootScope is available globally across your Angular app, whereas anything that belongs to a $scope is available within the part of the DOM to which that scope applies.</p>

<p>The $rootScope is applied to the DOM element that is the root element for the Angular app (hence the name $rootScope). When you add the ng-app directive to an element of the DOM, this becomes the root element of the DOM within which $rootScope is available. In other words, properties etc of $rootScope will be available throughout your entire Angular application.</p>

<p>An Angular $scope (and all of it's variables and operations) is available to a particular subset of the DOM within your application. Specifically, the $scope for any particular controller is available to the part of the DOM to which that particular controller has been applied (using the ng-controller directive). Note though that certain directives e.g. ng-repeat, when applied within a part of the DOM where the controller has been applied, can create child scopes of the main scope - within the same controller - a controller doesn't necessarily contain only one scope.</p>

<p>If you look at the generated HTML when you run your Angular app, you can easily see which DOM elements 'contain' a scope, as Angular adds the class ng-scope on any element to which a scope has been applied (including the root element of the app, which has the $rootScope).</p>

<p>By the way, the '$' sign at the start of $scope and $rootScope is simply an identifier in Angular for stuff that's reserved by Angular.</p>

<p>Note that using $rootScope for sharing variables etc. between modules and controllers isn't generally considered best practice. JavaScript developers talk about avoiding 'pollution' of the global scope by sharing variables there, since there may be clashes later on if a variable of the same name is used somewhere else, without the developer realising it's already declared on the $rootScope. The importance of this increases with the size of the application and the team that's developing it. Ideally the $rootScope will only contain constants or static variables, that are intended to be consistent at all times across the app. A better way of sharing stuff across modules may be to use services and factories, which is a another topic!</p>


blocks|key|157136|text|两者都是Java+script对象，区别如下图所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|157137|​|157138|📷|atomic|offset|length|157139|157140|NTB:|style|BOLD|157141|首先，angular应用程序尝试在$scope中查找任何模型或函数的属性，如果在$scope中找不到该属性，则在上层层次结构中的父作用域中搜索。如果在较高层次结构中仍未找到该属性，则angular尝试在$rootscope中解析。|157142|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/f10b79f4ac21d20a4445be8e336fe565.png|imageAlt^0|0|0|0|1|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@$G|11|H|12|1|13]]|A|$]]|$1|I|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|15|8|@$G|16|H|17|L|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|18|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W|X|-4]]]]

<p>Both are Java script objects and the difference is illustrated by diagram as below.</p>

<p><a href="https://i.stack.imgur.com/dk9QA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dk9QA.png" alt="enter image description here"></a></p>

<p><strong>NTB:</strong><br>
  First angular application try to find the property of any model or function in $scope , if it doesn't 
  found the property in $scope , then it search in parent scope in upper hierarchy. If the property is 
  still not found in upper hierarchy then angular tries to resolve in $rootscope.</p>


<p>Can anyone explain the difference between $scope and $rootScope?</p>

<p>I think </p>

<h2>$scope:</h2>

<blockquote>
  <p>We can  get ng-model properties in particular controller from the particular page by using this.</p>
</blockquote>

<hr>

<h2>$rootScope</h2>

<blockquote>
  <p>We can  get all ng-model properties  in any controller from any page by using this.</p>
</blockquote>

<hr>

<p>Is this correct? Or anything else?</p>


Difference between $scope and $rootScope

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

有人能解释一下$scope和$rootScope之间的区别吗？我认为$scope：我们可以从特定的页面中获取ng-model属性，特别是控制器。$rootScope我们可以使用它从任何页面获取任何控制器中的所有ng-model属性。这是正确的吗？或者别的什么？

问$scope与$rootScope的区别
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问$scope与$rootScope的区别EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问$scope与$rootScope的区别
EN