AngularJS 内置指令(二)
下面将要介绍的指令会以父级作用域为原型生成子作用域。这种继承的机制可以创建一个隔
离层，用来将需要协同工作的方法和数据模型对象放置在一起。
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>
