使用ng-controller标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-app>
<div ng-controller="firstController">
<input type="text" value="" ng-model="name" />
{{name}}
{{age}}
</div>
</div>
<script type="text/javascript" src="../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="./app/index.js"></script>
</body>
</html>
实现类:
var firstController = function ($scope) {
//申明一个Model, $scope对象叫做作用域
$scope.name = '张三';
$scope.age = 20;
}
多个控制器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-app>
<div ng-controller="firstController">
<input type="text" value="" ng-model="name" />
<div ng-controller="secondController">
<input type="text" value="" ng-model="name" />
</div>
</div>
</div>
<script type="text/javascript" src="../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="./app/index.js"></script>
</body>
</html>
实现类:
var firstController = function ($scope) {
//申明一个Model, $scope对象叫做作用域
$scope.name = '张三';
$scope.age = 20;
}
var secondController = function ($scope) {
$scope.name = '李四';
}
效果图: