AngularJs学习笔记(3)——scope

AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定。

$rootScope是所有$scope对象的最上层,AngularJS中最接近全局作用域的对象 。

一个ng-app可以有多个controller,$scope的范围局限于每一个controller中

$scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性

作用域提供了监视数据模型变化的能力 ,$scope的所有属性,都可以自动被视图访问到

作用域是应用状态的基础。基于动态绑定,我们可以依赖视图在修改数据时立刻更新$scope
也可以依赖$scope在其发生变化时立刻重新渲染视图 

$scope对象在AngularJS中充当数据模型,但与传统的数据模型不一样, $scope并不负责处
理和操作数据,它只是 HTML (视图) 和 JavaScript (控制器)之间的纽带

指令在AngularJS中被广泛使用,指令通常不会创建自己的$scope,但也有例外。比如
ng-controllerng-repeat指令会创建自己的子作用域并将它们附加到DOM元素上

 

作用域可以嵌套

scope的嵌套是通过controller的嵌套实现的

除了孤立作用域(指令内部创建的作用域)外,所有的作用域都通过原型继承而来,也就是说它们都可以访问父级作用域

默认情况下, AngularJS在当前作用域中无法找到某个属性时,便会在父级作用域中进行查找

示例:

1.创建两个controller

app.controller('ParentController', function($scope) {
    $scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
    $scope.sayHello = function() {
        $scope.person.name = 'Ari Lerner';
    };
});    

2.controller嵌套

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
        <a ng-click="sayHello()">Say hello</a>
    </div>
{{ person }}
</div>

我们应该始终用ngModel来绑定$scope上一个数据模型内的属性,而不是$scope上的属性,
这可以避免在作用域或后代作用域中发生属性覆盖

 

原文地址:https://www.cnblogs.com/lyd2016/p/7160304.html