Angular作用域对象与控制器对象
基于AngularJS v1.2.29版本
作用域对象
- 它是一个js实例对象，
ng-app指令默认创建一个根作用域对象（$rootScope） - 它的属性和方法与页面中的指令或表达式是关联的
控制器对象
是一个js实例对象，用来控制AngularJS应用数据
ng-controller
- 指定控制器的构造函数，AngularJS会根据此构造函数创建控制器对象
- AngularJS在创建控制器对象的同时，还会创建一个作用域对象
$scope，它是$rootScope的子对象 - 控制器的构造函数必须有一个名为
$scope的形参，AngularJS会自动将$scope对象传入
举个栗子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app>
<div ng-controller="MyController">
<input type="text" ng-model="firstName">
<input type="text" ng-model="lastName">
<p>username1: {{firstName + '-' + lastName}}</p>
<p>username2: {{getName()}}</p>
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
function MyController($scope) {
console.log(this);
console.log($scope);
$scope.firstName = 'M';
$scope.lastName = 'xc';
$scope.getName = function () {
console.log(this === $scope);
return $scope.firstName + ' ' + this.lastName;
}
}
</script>
</body>
</html>
基于AngularJS v1.5.5版本
在AngularJS v1.5.5版本中，Angular在作用域对象与控制器对象的理论方面变化不大，但使用方式发生变化，举个栗子。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<!--
注意：
1. ng-app指令的属性值
2. 使用Angular必须先创建模块，然后通过模块创建控制器
-->
<body ng-app="myApp">
<div ng-controller="c1">
<input type="text" ng-model="name">
<p>name: {{name}}</p>
</div>
<div ng-controller="c2">
<input type="text" ng-model="name">
<p>name: {{name}}</p>
</div>
<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
/*var myAppModule = angular.module('myApp', []);
myAppModule.controller('c1', function ($scope) {
$scope.name = 'A';
});
myAppModule.controller('c2', function ($scope) {
$scope.name = 'B';
});*/
// Angular的链式调用
angular.module('myApp', [])
.controller('c1', ['$scope', function ($scope) {
$scope.name = 'A';
}])
.controller('c2', ['$scope', function ($scope) {
$scope.name = 'B';
}]);
</script>
</body>
</html>