AngularJS: $scope 和 $rootScope 的区别-JavaScript中文网-JavaScript教程资源分享门户

在AngularJS中，$scope和$rootScope是两个最基本的概念。它们都是作用域(scope)对象，但是它们有一些重要的区别。

$scope

$scope是当前controller所拥有的作用域，在HTML页面上可以通过ng-controller指令来绑定到一个DOM元素上。任何在该元素内部定义的属性和方法都属于该$scope对象的成员，因此可以在视图中进行访问和操作。

示例代码

<div ng-controller="MyCtrl">
  <p>{{name}}</p>
  <button ng-click="changeName()">Change Name</button>
</div>

app.controller('MyCtrl', function($scope) {
  $scope.name = 'John';

  $scope.changeName = function() {
    $scope.name = 'Jane';
  };
});

在这个例子中，我们定义了一个名为MyCtrl的控制器，并使用$scope对象来创建了一个名为name的属性和一个名为changeName的方法，这两个成员都可以通过HTML模板使用。

$rootScope

$rootScope是整个AngularJS应用程序的作用域对象。它是所有$scope对象的父级，因此任何在$rootScope上定义的属性或方法都可以在整个应用程序中进行访问和操作。

示例代码

app.run(function($rootScope){
  $rootScope.title = 'My App Title';
});

app.controller('MyCtrl', function($scope, $rootScope){
  console.log($rootScope.title);
});

在这个例子中，我们在AngularJS应用程序启动时使用run块来定义了一个名为title的属性，并在控制器中进行了访问。由于$rootScope是整个应用程序的父级作用域对象，因此控制器中可以通过$rootScope.title来访问该属性。

区别

区别主要包括：

生命周期：$scope的生命周期与其对应controller相同，而$rootScope的生命周期与整个AngularJS应用程序相同；
继承关系：$scope对象可以继承自其他$scope对象或$rootScope对象，而$rootScope对象不能继承自任何其他作用域对象；
使用范围：$scope对象仅在其所绑定的DOM元素内部有效，而$rootScope对象则整个应用程序中均可使用。

总结

$rootScope和$scope是AngularJS开发中最常见的两个作用域对象。它们有着不同的生命周期和使用方式，需要开发者在实际项目中根据场景选择合适的作用域对象。在开发过程中充分利用$scope和$rootScope可以更好地组织代码，提升开发效率和质量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65294dbb7d4982a6ebbd8ac6