极客教程如何在Angular.js中创建嵌套控制器
AngularJS中的控制器是一个由JavaScript对象构造器帮助创建的JavaScript对象。一个控制器可以包含属性和函数。控制器用于控制AngularJS应用程序的应用数据。
在这篇文章中，我们将看到AngularJS中的嵌套控制器，并将在例子的帮助下理解它们的实现。
在AngularJS中创建控制器的方法是，要创建一个控制器，我们首先需要创建一个应用模块。模块是用来定义一个应用程序的。
语法:
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
...
});
描述:
- 一旦一个模块被创建，我们就用controller()方法给它添加一个控制器。
- controller()方法里面的第一个参数是控制器的名字。
- 第二个参数是一个以scope为参数的函数。scope对象是由AngularJS框架注入到每个控制器的。
- 不同的属性和方法可以附加到控制器函数内的$scope对象。
- 要使用一个控制器的属性或维护HTML元素中的数据，你需要在ng-controller指令中指定控制器。
例子1：这个例子将说明如何创建一个控制器
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{title}}</h1>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function (scope) {
scope.title = "AngularJS Controller";
});
</script>
</body>
</html>
输出:
实例2：这个例子将说明不同属性对控制器的附加作用。
<!DOCTYPE html>
<html>
<head>
<title>Example 2</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{properties.name}}</h1>
<p>{{properties.subject}}</p>
<label>First name:</label>
<input type="text" ng-model="firstname">
<br><br>
<label>Last name:</label>
<input type="text" ng-model="lastname">
<br><br>
<p ng-show="firstname!=undefined && lastname!=undefined">
Hello {{displayname()}}
</p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function (scope) {
scope.properties = {
"name": "GeeksforGeeks",
"subject": "AngularJS Controllers"
};
scope.displayname = function () {
returnscope.firstname + " " + $scope.lastname;
};
});
</script>
</body>
</html>
输出:
示例 2
在上面的例子中，我们已经为控制器 “myCtrl “添加了属性。一个控制器可以有不同的属性，如字符串、数字、对象、数组、函数。
嵌套控制器： AngularJS允许使用嵌套控制器。这意味着你在一个HTML元素中指定了一个控制器，该元素是另一个使用另一个控制器的HTML元素的孩子。这里需要注意的一点是，一个子控制器可以访问属于父控制器的属性和方法，但父控制器不能访问子控制器的属性和方法。
语法:
<div ng-controller="controller">
<div ng-controller="subcontroller">
</div>
</div>
例子1：这个例子将说明如何创建一个嵌套的控制器
<!DOCTYPE html>
<html>
<head>
<title>Example 3</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="parentController">
<div ng-controller="childController">
<p>{{title}}</p>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parentController", function (scope) {
scope.title = "This is parent controller.";
});
app.controller("childController", function ($scope) {
});
</script>
</body>
</html>
输出:
示例 3
在这里你可以观察到，父控制器有一个名为title的属性，它被子控制器继承。
例子2：如果我们在父控制器和子控制器中都添加相同的属性
<!DOCTYPE html>
<html>
<head>
<title>Example 4</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="parentController">
<div ng-controller="childController">
<p>{{title}}</p>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parentController", function (scope) {
scope.title = "This is parent controller.";
});
app.controller("childController", function (scope) {
scope.title = "This is child controller.";
});
</script>
</body>
</html>
输出:
示例 4
在这里你可以看到，父控制器和子控制器都有一个名为title的属性。子控制器的属性取代了父控制器的属性。
例子5：下面的例子显示了我们如何在AngularJS中使用嵌套控制器。
<!DOCTYPE html>
<html>
<head>
<title>Example 5</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="parentController">
<div ng-controller="childController">
<div ng-controller="subtopicsController">
<h1>{{title}}</h1>
<p>Topics:</p>
<div>
<ul ng-repeat="x in topics">
<li>{{x}}</li>
</ul>
</div>
<div>
<p>Subtopics:</p>
<ul ng-repeat="y in subtopics">
<li>{{y}}</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parentController", function (scope) {
scope.title = "GeeksforGeeks";
});
app.controller("childController", function (scope) {
scope.topics = ["Expressions", "Modules", "Controllers"];
});
app.controller("subtopicsController", function (scope) {
scope.subtopics = [
"What are expressions?",
"How are they used in data binding?",
"What are modules in AngularJS?",
"What is their importance?",
"What are controllers?",
"What are nested controllers?"
];
});
</script>
</body>
</html>
输出:
