$scope 和 $rootScope 的区别

IT技术 javascript angularjs
2021-02-17 23:36:29

谁能解释 $scope 和 $rootScope 之间的区别?

我认为

$范围:

我们可以通过使用它从特定页面获取特定控制器中的 ng-model 属性。


$rootScope

通过使用它,我们可以从任何页面获取任何控制器中的所有 ng-model 属性。


这个对吗?或者别的什么?

6个回答

“$rootScope”是在网页中创建的所有“$scope”角度对象的父对象。

在此处输入图片说明

$scope 是用创建的,ng-controller而 $rootscope 是用ng-app.

在此处输入图片说明

在 $rootScope 上的回声是用ng-app. 在你的 chrome 控制台中输入这个表达式,它的计算结果为 true。 angular.element('#ng-app').injector().get('$rootScope') === angular.element('#ng-app').scope()
2021-04-30 23:36:29

主要区别在于分配给对象的属性的可用性。分配给的属性$scope不能在定义它的控制器之外使用,而分配给的属性$rootScope可以在任何地方使用。

例如:如果你在下面的例子中替换$rootScope$scope的部门属性将不会在第二个从第一控制器填充

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's Developer's Guide to Scopes

每个 Angular 应用程序只有一个根作用域,但可能有多个子作用域。应用程序可以有多个作用域,因为某些指令会创建新的子作用域(请参阅指令文档以了解哪些指令会创建新的作用域)。创建新作用域时,它们将作为其父作用域的子项添加。这将创建一个树结构,该结构与它们所附加的 DOM 平行。

控制器和指令都引用了作用域,但彼此之间没有引用。这种安排将控制器与指令以及 DOM 隔离开来。这一点很重要,因为它使控制器与视图无关,从而极大地改善了应用程序的测试故事。

$rootScope全局可用,无论您在哪个控制器中,而$scope仅对当前控制器及其子控制器可用。

换句话说,我们可以看看这个;$rootScope是全局的,$scope而是本地的。WhenController分配给页面,因此$scope可以在此处使用变量,因为它绑定到此控制器。但是当我们想将它的值共享给其他控制器或服务时,$rootScope则被使用(**有其他方法,我们可以共享值,但在这种情况下我们想使用$rootScope)。

关于如何定义这两个词的第二个问题是正确的。

最后有点偏离轨道,请$rootScope谨慎使用与您使用全局变量的方式类似,调试起来可能会很痛苦,并且您可能会不小心更改计时器内某处的全局变量或使您的阅读不正确的东西。