angularjs scope（作用域）

什么是angularjs作用域：

1、scope(作用域)是应用在html（视图）和javascript（控制器）之间的纽带

2、scope是一个对象，有可用的方法和属性。

3、scope可应用在视图和控制器上。
怎么使用scope

我们在创建了控制器后，可以将$scope对象当作一个参数来传递：

例如：

<div ng-app="myApp" ng-controller="myCtrl"></div>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
// 执行函数
});
</script>

在上面的代码中,我们创建了myCtrl控制器,并将$scope对象当做参数传递给了函数.

实例:

<div ng-app="myApp">
	<div ng-controller="myCtrl">
		{{name}}
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	$scope.name = "zhang";
});
</script>

上面的代码是一个简单的$scope作用域的实例,其实我们应该能够看出来,$scope可以设置html控制器中的任何变量,并为其赋值,最终结果绑定在了html视图层.

注意:

其实scope是一个大的概念,scope是mvc组成下的产物,也就是view(视图)即html、model(模型)当前视图中可用的数据、controller(控制器)即javascript函数，可以添加或修改属性。

例如：

<div ng-app="myApp">
	<div ng-controller="myCtrl">
		<input type="text" ng-model="name">
		<p>{{myInfo}}</p>
		<button ng-click="myFunc()">点击</button>
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",["$scope",myCtrl]);
function myCtrl($scope){
	$scope.name = "zhang";
	$scope.myFunc = function(){
		$scope.myInfo = "你好" + $scope.name +"!";
	}
}
</script>

运行上面的代码结果如下图所示：

注意这是初始化运行后执行了一次点击事件后看到的效果，当我们修改输入框中的值时，再次点击你会发现下面的值变为你好+新的值。

根作用域

所有的应用都会有一个$rootScope,它可以作用在ng-app指令包含的所有html元素中。$rootScope可用于整个应用中，是各个controller中scope的桥梁，用于scope的桥梁，用rootScope定义的值，可以在各个controller中使用。

例如：

<div ng-app="myApp">
	<div ng-controller="myCtrl_1">
		{{one + " " + two + " " + three + " " + four}}
	</div>
	<div ng-controller="myCtrl_2">
		{{one + " " + two + " " + three + " " + four}}
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl_1",function($scope,$rootScope){
	$scope.one = 1;
	$rootScope.two = "全局1";
	console.log($rootScope.four);
});
app.controller("myCtrl_2",function($scope,$rootScope){
	$scope.three = 2;
	$rootScope.four = "全局2";
	console.log($rootScope.two);
});
</script>

其实$rootScopt就是一个全局对象，我们在控制器层，也就是js中设置的$rootScopt跟作用域，很明显在视图层，也就是在html中都能够访问到，但是在控制器1也就是myCtrl_1中通过 console.log($rootScope.four);方式来打印出myCtrl_2里面的 $rootScope.four = "全局2";的值却是"undefined"也就是说在myCtrl_1控制器中并没有找到变量four的值，但是 console.log($rootScope.two);却是可以将two的值打印出来，这也就说明了浏览器解析angularjs的规则，跟解析原生javascript是一样的，从上往下解析执行脚本，由于没有存在预解析，或变量提升的状况，所以 console.log($rootScope.four);执行的结果只能为undefined.

总结：
$scope： 对于$scope它的作用域就是视图层中对应的控制器部分，为什么是对应的控制器，因为在实际项目中为了满足开发者的需求我们需要创建的controller控制器不仅仅只有一个，这时我们必须要清楚此时的$scope对应的是哪个控制器。
$rootScope： 是属于全局作用域，对于这个根作用域我们需要注意两点。
1、在视图层中我们可以在任何地方去调用它设置的属性值，没有不同控制器的限制。
2、在js中我们不能忽视浏览器解析js脚本的规则来向下调用变量，这样会输出undefined，但是由下向上访问是可以的。
扩展：

1、this的指向

1、总是指向函数的直接调用者。

2、如果有new实例化对象，那么this就指向这个new出来的实例化对象。

3、如果是在事件中的话，那么this将指向触发该事件的那个对象。

其实从某种意义上来理解$scope，它与this是有着相同性的。

（如果想了解更多关于this与面向对象的内容，可查阅我的博文 javascript之基础部分、javascript之面向对象编程 中的相关类容）

2、变量提升，预解析（如果想深入了解变量提升以及预解析的内容可以查阅我的博文 javascript预解析 ）。

3、什么是undefined，以及什么情况下会输出undefined？

什么是undefined?

undefined是一个表示“无”的原始值，它与null不同，null是“无”的对象，当我们将null转化成数值时，null的值为“0”，但是undefined转换成数值的时候是“NaN”意思就是说不是数值。简单的理解就是undefined表示“无”的时候就是“无”就是不存在的意思，什么都没有。

那么都在什么情况下会出现undefined呢？

我们在开发的过程中时常会出现undefined，大致有以下几种情况会出现undefined。

1、当我们创建了变量，但是没有为其赋值的时候，如果调用这个变量就会出现undefined。

2、当调用函数时，应该提供的参数我们没有提供，这时候该参数就是undefined。

3、对象没有赋值属性，该属性的值为undefined。

4、当我们构造了函数但是却没有返回值的时候，这时默认返回的就是undefined。

如有理解不当之处，欢迎各位老铁留言指正。谢谢！！！！