【AngularJS】如果你修改了视图，模型和控制器也会相应更新

最新推荐文章于 2020-12-21 08:19:16 发布

陶洲川

最新推荐文章于 2020-12-21 08:19:16 发布

阅读量1k

点赞数

分类专栏：【基础】文章标签： scope Augular angularJS controller model

本文链接：https://blog.csdn.net/River_Continent/article/details/72770896

版权

【基础】专栏收录该内容

229 篇文章 1 订阅

订阅专栏

如果你修改了视图，模型和控制器也会相应更新

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>	
<body>
	<div ng-app="myApp" ng-controller="myCtrl">
		<input ng-model="name"/>
		<h1>{{greeting}}</h1>
		<button ng-click='sayHello()'>点我</button>		
	</div>
	<script>
		var app=angular.module('myApp',[]);
		app.controller('myCtrl',function($scope){
		$scope.name="陶洲川";
		$scope.sayHello=function(){
			$scope.greeting='你好 '+$scope.name+'!';
		};
		});
	</script>
<p>当你修改输入框中的值得时候，会影响到模型（model），当然也会影响到控制性对应的属性</p>	
</body>
</html>

还是老规矩，谈一点自己的感想；

①ng-click是点击方法，后面跟方法名；ng-click=‘sayHello’点击调用sayHello（）方法；

②var app=angular.module('myApp',[]); 定义变量app，组件属于myApp这个应用程序；

③$scope中的name是静态变量：“陶洲川”；

$scope中的sayHello是方法，等于$scope.greeting+$scope.name+‘！’；

④所有的方法（function）都得写在controller里面（）

⑤定义格式问题：

定义app应用程序： var app=angular.module('myApp',[]);

定义app的控制器： app.controller('myCtrl',function($scope){

}

截图：