angularJs的指令系统和双向数据绑定
2024-10-19 02:18:03
一、langularJs的指令系统
<!DOCTYPE HTML>
<html ng-app><!--这种以ng开头的就是指令系统，初始化的一个指令，不仅可以加在html这个标签上加在HTML这个标签中是全局，还可以加在下面任何标签中，加了这个指令的标签就能被解析（局部的）-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script> function Aaa($scope,$timeout){
$scope.name = 'hello';
} </script>
</head>
<body>
<div ng-controller="Aaa"><!--这种以ng开头的就是指令系统，controller是一个链接数据和界面的控制器-->
<p>{{name}}</p>
</div>
</body>
</html>
二、langularJs的双向数据绑定
就是通过数据影响视图，视图影响数据的一个过程
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
function Aaa($scope,$timeout){
$scope.name = 'hello'; //设置一个定时器，两秒后改变name的值
/*setTimeout(function(){
$scope.name = 'hi';
},2000);
这种方式没有效果
*/ $timeout(function(){
$scope.name = 'hi';
},2000);//这种方式有效果，两秒后改变了name的值
}
</script>
</head>
<body>
<div ng-controller="Aaa">
<p>{{name}}</p>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
function Aaa($scope,$timeout){
$scope.name = 'hello'; $scope.show = function(){
$scope.name = 'hi';
};
}
</script>
</head> <body>
<div ng-controller="Aaa" ng-click="show()">
<p>{{name}}</p>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
function Aaa($scope,$timeout){
$scope.name = 'hello';
}
</script>
</head>
<body>
<div ng-controller="Aaa">
<input type="text" ng-model="name"><!--通过这个输入框改变了name的值-->
<p>{{name}}</p>
</div> </body>
</html>
最新文章
- 为什么volatile不能保证原子性而Atomic可以？
- poi导出的excel的数字小数位过多？
- Google V8编程详解（四）Context
- nodejs中标准包的制作,上传,安装及卸载方法
- 从Python爬虫到SAE云和微信公众号：二、新浪SAE上搭建微信服务
- json字符串转map
- 关于Windows® API Code Pack for Microsoft® .NET Framework
- [搜片神器]BT种子下载超时很多的问题分析
- Parallax
- Qt经典—线程、事件与Qobject（耳目一新）
- RegexOptions枚举
- C++类的封装_工程
- 第六十九节，css入门基础
- 自己动手写把”锁”---LockSupport介绍
- button的padding属性在i8下和chrome下表现不一致
- 包装类和基本类型区别？（integer和int取值范围一样大）
- Android Stdio 中的Rendering Problems Android N requires the IDE to be running with Java 1.8 or later Install a supported JDK解决办法
- Java学习笔记记录（二）
- jQuery 选择具有特殊属性的元素
- AOP异常报错1