谁能解释$ scope和$ rootScope之间的区别?
我认为
$ scope:
通过使用此方法,我们可以从特定页面获取特定控制器中的ng-model属性。
$ rootScope
通过使用此方法,我们可以从任何页面的任何控制器中获取所有ng-model属性。
这样对吗?还是其他?
谁能解释$ scope和$ rootScope之间的区别?
我认为
通过使用此方法,我们可以从特定页面获取特定控制器中的ng-model属性。
通过使用此方法,我们可以从任何页面的任何控制器中获取所有ng-model属性。
这样对吗?还是其他?
Answers:
主要区别在于分配给对象的属性的可用性。分配有属性的属性$scope
不能在定义它的控制器之外使用,而分配有属性的属性$rootScope
可以在任何地方使用。
示例:如果在下面的示例中,您将$rootScope
用$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>
每个应用程序至少具有一个单独的rootScope,其生命周期与该应用程序相同,并且每个控制器都可以拥有自己的作用域,而不与其他用户共享。
看一下这篇文章:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
我建议您阅读有关作用域的官方深入Angular文档。从“范围层次结构”部分开始:
https://docs.angularjs.org/guide/scope
本质上,$ rootScope和$ scope都标识DOM的特定部分,其中
属于$ rootScope的所有内容都可以在Angular应用程序中全局使用,而属于$ scope的所有内容都可以在该范围所应用的DOM部分中使用。
$ rootScope应用于DOM元素,该元素是Angular应用程序的根元素(因此名为$ 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仅包含常量或静态变量,这些常量或静态变量应在整个应用程序中始终保持一致。跨模块共享内容的一种更好的方法可能是使用服务和工厂,这是另一个主题!
诸如John Papa的AngularJS样式指南之类的新样式建议我们完全不应该使用它$scope
来保存当前页面的属性。相反,我们应该使用controllerAs with vm
视图绑定到控制器对象本身的方法。然后在使用controllerAs语法时为此使用捕获变量。选择一个一致的变量名称,例如vm,代表ViewModel。
不过,您仍然需要$scope
其观看功能。