$scope $rootScope $watch 和 $state

最新推荐文章于 2025-07-04 13:37:18 发布

原创最新推荐文章于 2025-07-04 13:37:18 发布 · 607 阅读

1 ·

CC 4.0 BY-SA版权

从零开始学前端专栏收录该内容

198 篇文章

订阅专栏

本文深入探讨AngularJS中的核心概念，包括$scope的作用域机制，$rootScope作为全局作用域的使用，$watch的双向绑定原理及其用法，以及$state在路由管理中的应用。通过实例分析，解答了如何通过$rootScope传递参数，如何取消$watch以优化性能等问题，并提供了相关参考资料和常见问题解答。

这里是修真院前端小课堂，每篇分享文从

八个方面深度解析前端知识/技能，本篇分享的是：

【$scope $rootScope $watch 和 $state】

1.背景介绍
在平时的编码中，我们总会想着有什么方法能够简化我们的工作流程，让我们只专心于业务逻辑和数据的处理，而angularjs就为我们程序员实现了这一点。$scope $rootScope $watch 和 $state就是里面的几个方法，今天着重跟大家讨论一下这几个方法

2.知识剖析
$scope
$scope在angularjs中，你可以把它理解成作用域，每个不同的controller，都具有它不同的作用域，所以controller不同，他们的scope是不同的，那么，如果我们想象js那样，做一个全局变量该怎么办呢？这就要说到rootScope了。

$rootScope
$rootScope是由angularJS加载模块的时候自动创建的，每个模块只会有1个rootScope;

$rootScope就相当于一个全局作用域，所以我们保存在其中的东西是全局性的，在任一controller之中都能够使用scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。

$w a t c h 相信使用过 a n g u l a r j s 的同学都知道， n g 中有个比较重要的特点，叫做双向绑定，那么这个双向绑定是如何实现的呢？当我们在创建出 s c o p e 下的一个新属性的时候， n g 就会主动为我们新属性加上$ watch这个方法，这个方法会监听我们的数据变化，当数据变化之后，就立即把view和scope上数据同步。虽然angular会为每一个ng-model添加一个

watch事件，但我们还可以定义己watch事件，但我们还可以定义自己的watch事件，但我们还可以定义自己的watch事件，但我们还可以定义自己的watch，所以需要了解一下$watch的用法；

$watch(watchExpression, listener, objectEquality);

watchExpression:监听的对象，它可以是一个angular表达式如’name’,或函数如function();注意如果是函数的话，需要加上（）不能只写函数名；

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality,是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

$state
$state是路由中的一项服务,简单来说就是给路由一个对应的状态，让其根据不同的状态加载不同的页面；

3.常见问题
如何通过$rootscope传参

4.解决方案

var myApp = angular.module(‘myApp’, []);
myApp.controller(“mycontroller”, [‘ $s c o p e^{'},^{'}$ rootScope’, function($scope, $rootScope) {
$rootScope.arr = ‘this a book’

}])
myApp.controller(“mycontroller1”, [‘ $s c o p e^{'},^{'}$ rootScope’, function($scope, $rootScope) {
$scope.arr = $rootScope.arr;
}])
5.编码实战
demo1