index.html
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
</div>
</body>
</html>
function MyController($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}
控制器:
MyController
,它引用了
$scope
并在其上注册了两个属性和一个方法
$scope 对象:持有上面例子所需的数据模型,包括
username
属性、
greeting
属性(注:这是在
sayHello()
方法被调用时注册的)和
sayHello()
方法
那么具体整个示例有这样两个流程,从控制器发起的角度来看就是:
- 控制器往作用域中写属性:
- 给作用域中的
username
赋值,然后作用域通知视图中的input
数据变化了,input
因为通过ng-model
实现了双向绑定可以知道username
的变化,进而在视图中渲染出改变的值,这里是World
- 给作用域中的
- 控制器往作用域中写方法
- 给作用域中的
sayHello()
方法赋值,该方法被视图中的button
调用,因为button
通过ng-click
绑定了该方法,当用户点击按钮时,sayHello()
被调用,这个方法读取作用域中的username
属性,加上前缀字符串Hello
,然后赋值给在作用域中新创建的greeting
属性
- 给作用域中的