范围和$rootscope之间的差异-JavaScript中文网-JavaScript教程资源分享门户

在AngularJS中，范围（Scope）是一个对象，用于传递模型数据和行为函数。而$rootScope是整个应用程序中所有控制器的公共父元素。

范围（Scope）

范围是AngularJS中最重要的概念之一，它是连接视图和控制器的桥梁。每个AngularJS应用程序都有自己的作用域层次结构，这些层次结构可以包含其他子范围。

范围可以继承自父范围，并通过绑定属性来共享数据。如果在一个范围内改变了一个值，这个值也会在该范围的所有子范围中得到更新。这种继承机制使得范围具有良好的可重用性和可维护性。

创建一个范围非常简单，只需使用AngularJS提供的$rootScope服务即可：

myApp.controller('MyController', ['$scope', function($scope) {
    $scope.name = 'John';
}]);

上面的代码定义了一个名为MyController的控制器，并将其绑定到$scope对象上。我们可以在视图中使用{{name}}表达式来显示name模型中的值。

我们可以使用$rootScope服务创建一个全局范围，然后在其下创建子范围。使用父作用域来设置模型值，这些值也可以在子范围中访问。

myApp.controller('MyController', ['$scope', '$rootScope', function($scope, $rootScope) {
    $rootScope.name = 'John';
    $scope.age = 25;
}]);

上面这个例子中，$rootScope对象被用来创建一个全局的父范围，我们在里面定义了name模型。在控制器内部，我们使用$scope对象创建了一个子范围，并定义了age模型。现在，如果我们在视图中使用表达式{{name}}和{{age}}，它们都将显示正确的值。

$rootScope是AngularJS应用程序中所有控制器的公共父元素。它位于整个范围层次结构的顶部，因此它可以访问所有范围中的数据和函数。

我们可以像创建任何其他服务一样创建$rootScope：

myApp.run(function($rootScope) {
    $rootScope.name = 'John';
});

在上面的代码中，我们使用了一个AngularJS提供的run方法，该方法会在应用程序启动时运行。在这个方法中，我们将name模型添加到$rootScope对象中。

$rootScope和范围之间最大的区别在于作用域继承的方式。$rootScope是一个全局对象，它不会被任何范围所继承。这意味着，如果我们将数据存储在$rootScope中，它将对所有控制器可用。

myApp.controller('MyController', ['$scope', '$rootScope', function($scope, $rootScope) {
    $scope.name = 'Jane';
    $rootScope.name = 'John';
}]);

在上面的例子中，我们向$rootScope和$scope中都添加了name模型。因此，在视图中使用表达式{{name}}时，AngularJS会优先使用$scope中的模型值。但是，如果$scope中没有定义name模型，则会使用$rootScope中的模型值。

范围和$rootScope都是AngularJS应用程序管理数据和行为的重要概念。范围提供了更好的可重用性

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/12172