下面将要介绍的指令会以父级作用域为原型生成子作用域。这种继承的机制可以创建一个隔
离层，用来将需要协同工作的方法和数据模型对象放置在一起。
ng-app
和ng-controller是特殊的指令，因为它们会修改嵌套在它们内部的指令的作用域。
ng-app
为AngularJS应用创建$rootScope，ng-controller则会以$rootScope或另外一个
ng-controller
的作用域为原型创建新的子作用域。
1. 子作用域：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<div ng-controller="SomeCtrl">
{{ someProperty }}
<button ng-click="someAction()">Communicate</button>
</div>
<script>
angular.module(‘myApp‘, [])
.controller(‘SomeCtrl‘, function($scope) {
$scope.someProperty = ‘hello computer‘;
$scope.someAction = function() {
$scope.someProperty = ‘hello human‘;
};
});
</script>
</body>
</html>
内置指令
ng-controller的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作
和
模型都定义在$rootScope上。用这个指令可以在一个DOM元素上放置控制器。
ng-controller
接受一个参数expression，这个参数是必需的。
expression
参数是一个AngularJS表达式。
子
$scope只是一个JavaScript对象，其中含有从父级$scope中通过原型继承得到的方法和属
性，包括应用的
$rootScope。
嵌套在
ng-controller中的指令有访问新子$scope的权限，但是要牢记每个指令都应该遵守
的和作用域相关的规则。
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<div ng-controller="SomeCtrl">
{{ someModel.someProperty }}
<button ng-click="someAction()">Communicate</button>
</div>
<script>
angular.module(‘myApp‘, [])
.controller(‘SomeCtrl‘, function ($scope) {
// create a model
$scope.someModel = {
// with a property
someProperty: ‘hello computer‘
}
// set methods on the $scope itself
$scope.someAction = function () {
$scope.someModel.someProperty = ‘hello human‘;
};
});
</script>
</body>
</html>
多个控制器：
1 <!doctype html>
2 <html ng-app="myApp">
3 <head>
4 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
5 </head>
6 <body>
7
8 <div ng-controller="SomeCtrl">
9 {{ someBareValue }}
10 <button ng-click="someAction()">Communicate to child</button>
11 <div ng-controller="ChildCtrl">
12 {{ someBareValue }}
13 <button ng-click="childAction()">Communicate to parent</button>
14 </div>
15 </div>
16
17 <script>
18 angular.module(‘myApp‘, [])
19 .controller(‘SomeCtrl‘, function ($scope) {
20 // anti-pattern, bare value
21 $scope.someBareValue = ‘hello computer‘;
22 // set actions on $scope itself, this is okay
23 $scope.someAction = function () {
24 $scope.someBareValue = ‘hello human, from parent‘;
25 };
26 })
27 .controller(‘ChildCtrl‘, function ($scope) {
28 $scope.childAction = function () {
29 $scope.someBareValue = ‘hello human, from child‘;
30 };
31 });
32 </script>
33
34 </body>
35 </html>
嵌套控制器，会同步修改：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
<div ng-controller="SomeCtrl">
{{ someModel.someValue }}
<button ng-click="someAction()">Communicate to child</button>
<div ng-controller="ChildCtrl">
{{ someModel.someValue }}
<button ng-click="childAction()">Communicate to parent</button>
</div>
</div>
<script>
angular.module(‘myApp‘, [])
.controller(‘SomeCtrl‘, function ($scope) {
// best practice, always use a model
$scope.someModel = {
someValue: ‘hello computer‘
}
$scope.someAction = function () {
$scope.someModel.someValue = ‘hello human, from parent‘;
};
})
.controller(‘ChildCtrl‘, function ($scope) {
$scope.childAction = function () {
$scope.someModel.someValue = ‘hello human, from child‘;
};
});
</script>
</body>
</html>
时间： 2024-10-14 07:22:59