angularjs双向绑定原理是什么?
2023-03-15 23:16:47 时间
AngularJS因是为开发者呈现一个更高层次的抽象来简化应用的开发而得到很多人的喜爱。它的数据驱动很有意思,AngularJS数据驱动是由双向绑定完成的。所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面。本文主要介绍angularjs双向绑定原理。
一、AngularJS的工作原理:
1、ngularJS启动,搜寻所有的指令(directive);
2、到ng-app,搜寻其指定的模块(Module),并将其附加到ng-app所在的组件上;
3、nguarJS遍历所有的子组件,查找指令和bind命令;
4、发现ng-controller或者ng-repeart,创建一个作用域(scope);
5、添加对变量的监听器,并监控每个变量的当前值。
二、实例代码
<p style="line-height: normal">1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <body> 9 <div ng-app="myApp" ng-controller="myCtrl"> 10 名: <input type="text" ng-model="firstName"><br> 11 姓: <input type="text" ng-model="lastName"><br> 12 <br> 13 姓名: {{firstName + " " + lastName}} 14 </div> 15 </body> 16 <script> 17 var app = angular.module('myApp', []); 18 app.controller('myCtrl', function($scope) { 19 $scope.firstName = "王"; 20 $scope.lastName = "二狗"; 21 }); 22 </script> 23 </html><br /></p>
以上就是python中angularjs双向绑定原理,希望能对你有所帮助哦~
相关文章
- 从本体论开始说起——运营商关系图谱的构建及应用
- 如何成为一名数据科学家?
- 从未见过的堂兄杀了人,你的DNA是关键证据
- 20个安全可靠的免费数据源,各领域数据任你挑
- 20个安全可靠的免费数据源,各领域数据任你挑
- 阿里云李飞飞:All in Cloud时代,云原生数据库优势明显
- 基于Hadoop生态系统的一高性能数据存储格式CarbonData(性能篇)
- 大数据告诉你:10年漫威,到底有多少角色
- TigerGraph:实时图数据库助力金融风控升级
- Splunk利用Splunk Connected Experiences和Splunk Business Flow 扩大数据访问
- 大数据开发常见的9种数据分析手段
- 以免在景区看人,我爬了5W条全国景点门票数据...
- 【实战解析】基于HBase的大数据存储在京东的应用场景
- 数据科学家告诉你哪些计算机科学书籍是你应该看的
- Kafka作为大数据的核心技术,你了解多少?
- Spring Boot 整合 Redis 实现缓存操作
- 大数据学习必须掌握的五大核心技术有哪些?
- 基于Antlr在Apache Flink中实现监控规则DSL化的探索实践
- 甲骨文再次被Gartner评为分析型数据管理解决方案魔力象限领导者
- 爬取吴亦凡微博102118条转发数据,扒一扒流量的真假