简介指令与双向数据绑定

简介指令与双向数据绑定

以ng-开头的叫做指令

ng-controller:控制器

ng-app: 初始化,不写anlugarjs是不会执行的,可以针对局部的范围。

<html ng-app>  

或者

<div ng-app ng-controller="Aaa">


双向数据绑定:MVVM的数据模式

<html ng-app>
	<head>
		<title>Demo1</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript" src="angular.min.js"></script>
		<script>
			function Aaa($scope,$timeout){
				$scope.name ='init';
				setTimeout(function(){
					$scope.name = 'init2';  //原生JS定时器不具备刷新视图的功能,必须用它提供的服务
				},2000);
				
				$timeout(function(){
					$scope.name = '$timeout';
				},2000);
			}
			
		</script>
	</head>
	<body>
		<div ng-controller="Aaa">
			<p>{{name}}</p>
		</div>
	</body>
</html>
<html ng-app>
	<head>
		<title>Demo1</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript" src="jquery-1.11.1.js"></script>
		<script type="text/javascript" src="angular.min.js"></script>
		<script>
			function Aaa($scope,$timeout){
				$scope.name ='init';
				$scope.show = function(){
					$scope.name='fnhi';
				}
			}
			
		</script>
	</head>
	<body>
		<div ng-controller="Aaa">
			<input type="text" ng-model="name"/>
			<p>{{name}}</p>
		</div>
		
	</body>
</html>


指令:ng-click=""

<div ng-controller="Aaa" ng-click="name='hi'">
	<p>{{name}}</p>
</div>

函数调用方式:

<html ng-app>
	<head>
		<title>Demo1</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript" src="jquery-1.11.1.js"></script>
		<script type="text/javascript" src="angular.min.js"></script>
		<script>
			function Aaa($scope,$timeout){
				$scope.name ='init';
				$scope.show = function(){
					$scope.name='fnhi';
				}
				setTimeout(function(){
					$scope.name = 'init2';  //原生JS定时器不具备刷新视图的功能,必须用它提供的服务
				},2000);
				
				$timeout(function(){
					$scope.name = '$timeout';
				},2000);
			}
			
		</script>
	</head>
	<body>
		<div ng-controller="Aaa" ng-click="show()">
			<p>{{name}}</p>
		</div>
		
	</body>
</html>

ng-mouseover,ng-mousedown....

你可能感兴趣的:(简介指令与双向数据绑定)