首页 >> 大全

AngularJS初识--作用域

2023-09-02 大全 32 作者:考证青年

作用域是构成应用的核心基础,在整个框架中都被广泛使用。作用域是视图和控制器之间的胶水。在应用将视图渲染并呈现个用户之前,视图中的模板和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给。也就是说,作用域是应用状态的基础。基于动态绑定,我们可以依赖视图在修改数据时立即更新$scope,也可以依赖$scope在其发生改变时立刻重新渲染视图

在创建子作用域后,关于属性方法等的查找像js原型链继承类似。如果子作用域中不存在该属性,会在父作用域中查找,如果不存在,则在子作用域中创建该属性。但是ng-会对每一个迭代项item都会创建子作用域,子作用域也从父作用域进行原型继承。但它还是会在子作用域中新建同名属性,把item赋值给对应的子作用域的同名属性

启动并生成视图时,会将根ng-app元素同 $ 进行绑定。$ 是所有 $scope 对象的最上层。$scope 对象就是一个普通的对象,存在于中的控制层。我们可以在其上随意修改或添加属性。 $scope 对象在中充当数据模型,但与传统的数据模型不一样,$scope 并不负责处理和操作数据,它只是视图和HTML之间的桥梁,它是视图和控制器之间的胶水。$scope 的所有属性都可以自动被视图访问到。

    

we can access :{{rootProperty}} and {{parentProperty}}

we can access: {{rootProperty}} and {{parentProperty}} and {{childProperty}}

{{fullSentenceFromChild}}

添加控制器函数

var app = angular.module('myapp',[]);
//run访问$rootScope属性和方法
app.run(function($rootScope){$rootScope.rootProperty = 'root scope';})app.controller('ParentController',function($scope){$scope.parentProperty = 'partent scope';})app.controller('ChildController',function($scope){$scope.childProperty = 'child scope';$scope.fullSentenceFromChild = 'Same $scope:we can access:'+ $scope.rootProperty + 'and' + $scope.parentProperty + 'and' + $scope.childProperty;})

运行结果如下

这里写图片描述

scope内部属性

打开并导航到正在使用的一个应用程序,审查元素并打开开发者工具。我们知道$0 可以获得最后一个选中的元素,$1 访问前一个被选中的元素。在控制台中输入命令

angular.element($0).scope()

这里写图片描述

下面是该命令产生的属性

scope与事件的传播

使用scope可以绑定事件和发布事件,中发送事件可以使用$emit(向上发送事件)、$(向下发送事件)$on来绑定事件

click me

具体实现代码请参看 scope与事件传播

最后总结scope的特点

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了