$scope $rootScope $watch 和 $state

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

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

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

【$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中使用。

 

$watch
相信使用过angularjs的同学都知道，ng中有个比较重要的特点，叫做双向绑定，那么这个双向绑定是如何实现的呢？当我们在创建出scope下的一个新属性的时候，ng就会主动为我们新属性加上$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", ['$scope', '$rootScope', function($scope, $rootScope) {
    $rootScope.arr = 'this a book'

}])
myApp.controller("mycontroller1", ['$scope', '$rootScope', function($scope, $rootScope) {
    $scope.arr = $rootScope.arr;
}])
5.编码实战
demo1

6.扩展思考
怎么取消$watch，为什么取消？

$watch的性能消耗较大，所以对于已经不需要监视的watch，记得定时取消掉。

7.参考文献
     <p>http://yuankeqiang.lofter.com...;/p>
        <p>https://blog.csdn.net/u010451...;/p>12
8.更多讨论
 

Q1:$scope和$rootscope的优先级谁高

A1：$scope的优先级高，系统会先查找$scope内的，如果能找到相应的值，就不会再往上查找！

Q2:$rootscope定义多个，会被覆盖吗？

A2：会被后面一个覆盖掉，不要随便定义

Q3:$state的使用方法？

A3：

 

看下面，简单来说就是在HTML里面加上href的路径。然后有一个ng-view用来展示信息的地方。

最后一个是具体的路由当，不同的状态时，显示不同的值。

<li>电脑</li>

<li>打印机</li>

 

<div ng-view></div>

.when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'})