$ scope和$ rootScope之间的区别
任何人都可以解释$ scope和$ rootScope之间的区别吗?
我认为
$范围:
我们可以通过使用这个特定的页面在特定的控制器中获得ng-model属性。
$ rootScope
我们可以通过任何页面获得任何控制器中的所有ng模型属性。
它是否正确? 还是其他什么?
“$ rootScope”是在网页中创build的所有“$ scope”angular对象的父对象。
$ scope是用ng-controller
创build的,而$ rootscope是用ng-app
创build的。
主要区别是分配给对象的属性的可用性。 赋给$ scope的属性不能在定义它的控制器之外使用,而赋予$ rootScope的属性可以在任何地方使用。
示例:如果在下面的示例中,将$ rootScopereplace为$ scope,那么department属性将不会从第二个控制器中填充
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>
根据Angular的范围开发者指南 :
每个Angular应用程序只有一个根作用域,但可能有多个子作用域。 应用程序可以有多个作用域,因为有些指令会创build新的子作用域(请参阅指令文档以查看哪些指令创build新的作用域)。 当新的作用域被创build时,它们被添加为其父作用域的子对象。 这创build了一个树形结构,它与它们所连接的DOM平行。
控制器和指令都有引用的范围,但不是彼此。 这种安排将控制器从指令和DOM中分离出来。 这是重要的一点,因为它使控制器视图不可知,极大地提高了应用程序的testing故事。
$rootScope
是全局可用的,不pipe你在哪个控制器中,而$scope
只可用于当前的控制器,它是子级。
每个应用程序至less有一个rootScope,其生命周期与应用程序相同,每个控制器都可以拥有自己的作用域,而不是与其他应用程序共享。
看看这篇文章:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
换句话说,我们可以看看这个; $rootScope
是全局的,而$scope
是本地的。 当Controller
被分配到一个页面,所以$scope
variables可以在这里使用,因为它绑定到这个控制器。 但是当我们想把它的价值分享给其他的控制器或者服务的时候,我们就使用了$rootScope
(**还有其他方法,我们可以共享值,但是在这种情况下我们想要使用$rootScope
)。
关于如何定义这两个单词的第二个问题是正确的。
最后有点偏离,请小心使用$rootScope
。 类似于你使用全局variables的方式,可能是一个痛苦的debugging,你可能会意外地改变全局variables内的某个地方,或者让你的阅读不正确。
我build议你阅读官方深入的范围angular度文档。 从“范围层次结构”部分开始:
https://docs.angularjs.org/guide/scope
实质上,$ rootScope和$ scope都标识了DOM中的特定部分
- angular度操作被执行
- 声明为$ rootScope或$ scope的一部分的variables是可用的
任何属于$ rootScope的属性都可以在Angular应用程序中全局使用,而属于$ scope的任何属性都可以在该范围所应用的DOM部分中使用。
$ rootScope应用于作为Angular应用程序根元素的DOM元素(因此名称为$ rootScope)。 当您将ng-app指令添加到DOM元素时,它将成为$ rootScope可用的DOM的根元素。 换句话说,$ rootScope的属性等将在您的整个Angular应用程序中可用。
一个Angular $范围(及其所有的variables和操作)可以在您的应用程序中的DOM的特定子集中使用。 具体而言,任何特定控制器的$范围对于应用了特定控制器的DOM部分(使用ng-controller指令)都是可用的。 请注意,虽然某些指令(例如ng-repeat)在应用了控制器的DOM的一部分中应用时,可以创build主范围的子范围 – 在同一控制器内 – 控制器不一定只包含一个范围。
如果您在运行Angular应用程序时查看生成的HTML,则可以很容易地看到哪些DOM元素包含作用域,因为Angular将类作用域添加到应用了作用域的任何元素(包括根元素的应用程序,其中有$ rootScope)。
顺便说一下,在$ scope和$ rootScope开始处的$符号只是Angular中由Angular保留的一个标识符。
请注意,使用$ rootScope在模块和控制器之间共享variables等通常不被认为是最佳实践。 JavaScript开发人员通过在其中共享variables来避免“全球范围内的污染”,因为如果在别的地方使用了同名的variables,而开发人员没有意识到已经在$ rootScope中声明了variables,则可能会发生冲突。 随着应用程序和正在开发它的团队的规模的增加,这一点的重要性也随之增加。 理想情况下,$ rootScope将只包含常量或静态variables,这些variables在整个应用程序中始终保持一致。 在模块之间共享资源的更好方式可能是使用服务和工厂,这是另一个话题!
像John Papa的AngularJS Styleguide这样的新风格build议我们不应该使用$scope
来保存当前页面的属性。 相反,我们应该使用controllerAs with vm
方法将控制器绑定到控制器对象本身。 然后在使用controllerAs语法时为此使用捕获variables。 select一个一致的variables名,例如vm,代表ViewModel。
尽pipe如此,你仍然需要$scope
来监视它。