一.$scope
关于$scope的解释,AngalurJS的权威指南是这样解释的
"作用域（scope）是构成AngularJS应用的核心基础，在整个框架中都被广泛使用，因此了解它如何工作是非常重要的。应用的作用域是和应用的数据模型相关联的， 同时作用域也是表达式执行的上下文。 $scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。"
比较晦涩,我们上一段代码,观察$scope
二.$scope什么时候被创建?
<body ng-app="app">
<div ng-model="suibian">{{suibian}}</div>
<div ng-controller="myController">{{num}}</div> //控制器的名字myController
</body>
<script>
angular.module( 'app', [] )
.controller( 'myController', function ( $scope ) {
$scope.num = 123;
} )
</script>
主要是分两种情况:
1.ng在使用的时候,页面中只要存在ng-app就会去创建一个scope,这时候他的名字是$rootscope,
2.在标签中,凡是创建一个控制器,那么就会自动的创建一个scope,叫做$scope
$rootscope是所有$scope对象的最上层,从理解角度来看,scope就好比HTML页面中的一个HTML标签背后的对象,例如上面的代码里,body标签里面嵌套着div标签,上面代码中由控制器"myController"产生的$scope是继承自"ng-app"产生的$rootscope的.
三.$scope与视图(View)的关系
AngularJS将$scope设计成和DOM类似的结构,因此$scope可以进行嵌套,也就是说可以引用父级$scope中的属性。
$scope对象就是一个普通的JavaScript的对象,我们可以在其上随意修改或添加属性。浅白的说，就是凡是是在HTML标签中，使用ng-model，或ng-click等操作时，就是在$scope上添加属性或方法。
$scope对象在AngalurJS中充当数据模型,但与传统的数据模型又不一样,$scope并不处理和操作数据,它只是视图和HTML之间的桥梁。
$scope的所有属性,都可以自动被视图访问到,参考下面代码
<div ng-app="mainApp" ng-controller="mainController">
<input type="text" placeholder="请输入姓名" ng-model="nameabc" >
<span>你好! {{nameabc}}</span>
</div>
<script>
//创建一个模块 绑定要操作的view(mainApp)
angular.module("mainApp",[])
//创建控制器
.controller("mainController",["$scope",function($scope){
$scope.nameabc = "wcm817";
}]);
</script>
当刷新页面的时候,文本框中就有wcm817,
我接着在文本框中输入wcm时,后面的span标签的内容也会跟着一样改变
再从新输入内容
上面的例子就是最简单的数据的双向绑定,其实AngularJS最大的特点之一也是实现数据的双向绑定!!
1139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
