您的位置：首页 > Web前端 > AngularJS

angularJS学习之路（四）---作用域（1）

2015-11-22 20:51 531 查看

这里提到的“作用域”的概念，是一个在范围上与 DOM 结构一致，数据上相对于某个 $scope 对象的属性的概念。我们还是从 HTML 代码上来入手：

<div ng-controller="BoxCtrl">

<div style="width: 100px; height: 100px; background-color: red;"

ng-click="click()">

</div>

<p>{{ w }} x {{ h }}</p>

<p>W: <input type="text" ng-model="w" /></p>

<p>H: <input type="text" ng-model="h" /></p>

</div>

上面的代码中，我们给一个 div 元素指定了一个 BoxCtrl ，那么， div 元素之内，就是 BoxCtrl 这个函数运行时， $scope 这个注入资源的控制范围

作用域很关键，因为它涉及到表达式的上下文

首先要知道 $scope 的意思或者作用：

$scope 作用是：定义应用业务逻辑、控制器方法、视图属性

作用域：是动态绑定的这个是angularjs框架的一个好处：无论是在客户端进行视图修改还是在依赖发生变化时视图都会被重新渲染

作用域：监视数据模型变化当然指的是在它的范围内

作用域：发送变化时由apply机制实现通知

作用域：界定范围是由 ng-app 元素确定的，这个被应用的元素和它内部的所有元素都在这个$scope 范围内

作用域包含作用域类似继承这个概念

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say Hello</a>
</div>
{{person}}
</div>

<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
var app =angular.module("myApp",[]);
app.controller('ParentController',function($scope){
$scope.person = {greeted:false};
});

app.controller('ChildController',function($scope) {
$scope.sayHello = function(){
$scope.person.name = "hello world";
};
});

</script>

</body>
</html>

默认情况下 angularjs 在当前作用域中无法找到这个属性的时候，便会在父级作用域中进行查找一级一级的往上找，直到找到为止，
如果没有找到视图不会发生更新

遵守原型继承的机制子类可以调用父类的属性和方法

上面代码的结果是这样的：

Say Hello
{"greeted":false}

然后你点击Say Hello 视图更新：

Say Hello
{"greeted":false,"name":"hello world"}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航