- Scope是作用在HTML(视图)和JS(控制器)之间的纽带
- Scope是一个JS对象,有可用的方法和属性,这些属性和方法可以在视图(即HTML页面)和控制器(即JS文件中)使用。
- Scope可应用在视图和控制器上
如何使用Scope
当创建控制器时,可以将$Scope对象当做参数来传递,代码如下:
控制器中的属性对应视图上的属性
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ss}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.ss = "xxxxxxxxxxx";
});
</script>
</body>
AngularJS应用组成
- view视图,由HTML负责
- Model模型,也就是当前HTML中的标签中有ng-model修饰的标签
- Controller(控制器),也就是JS函数
如果你修改了视图中的数据,也就是把页面中中输入框中的值改变之后,它相对应的模型和控制器也会进行相应的改变。如下面的代码:
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"> </script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="word"/>
{{word}}
<button ng-click="btn()">在控制台显示输入框中的值</button>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.word="mi";
$scope.btn = function(){
console.log($scope.word)
};
});
</script>
</body>
在输入框中输入不同的值,点击按钮,就可以在控制台看到相应的值。如下图:
根作用域$rootScope
所有的应用都有一个$rootScope,它可以作用在爱ng-app指令包含的所有HTML元素中,rootScope可作用于整个应用中,用rootScope定义的值,可以在各个controller中使用。