标签:
一、langularJs的指令系统
<!DOCTYPE HTML> <html ng-app><!--这种以ng开头的就是指令系统,初始化的一个指令,不仅可以加在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>
标签:
原文地址:http://www.cnblogs.com/LO-ME/p/4562427.html