如何在 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：本示例将说明如何创建控制器

HTML

  

    Example 1
    

  

    
        {{title}}
    
  
    
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.title = "AngularJS Controller";
        });
    

  

输出：

示例2：本示例将说明不同属性对控制器的附加

HTML

  

    Example 2
    
      

  

    
        {{properties.name}}
        {{properties.subject}}
  
        First name:
        
        
        Last name:
        
        
        
          Hello {{displayname()}}
          
  
    
    
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.properties = { 
              "name": "GeeksforGeeks", 
              "subject": "AngularJS Controllers" 
            };
            $scope.displayname = function () {
                return $scope.firstname + " " + $scope.lastname;
            };
        });
    

  

输出：

示例 2

在上面的示例中，我们向控制器“myCtrl”添加了属性。控制器可以具有不同的属性，如字符串、数字、对象、数组、函数。

嵌套控制器： AngularJS 允许使用嵌套控制器。这意味着您在 HTML 元素中指定了一个控制器，该控制器是使用另一个控制器的另一个 HTML 元素的子元素。这里需要注意的重要一点是，子控制器可以访问属于父控制器的属性和方法，但父控制器不能访问子控制器的属性和方法。

句法：

示例 1：此示例将说明如何创建嵌套控制器

HTML

  

    Example 3
    
      

  

    
        
            {{title}}
  
        
    
    
        var app = angular.module("myApp", []);
        app.controller("parentController", function ($scope) {
            $scope.title = "This is parent controller.";
        });
        app.controller("childController", function ($scope) {
        });
    

  

输出：

示例 3

在这里您可以观察到父控制器有一个名为 title 的属性，该属性由子控制器继承。

示例 2：如果我们将相同的属性添加到父控制器和子控制器

HTML

  

    Example 4
    
      

  

    
        
            {{title}}
  
        
    
    
        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.";
        });
    

  

输出：

示例 4

在这里，您可以观察到父控制器和子控制器都具有名为 title 的属性。子控制器的属性覆盖父控制器的属性。

示例 5：下面的示例展示了我们如何在 AngularJS 中使用嵌套控制器。

HTML

  

    Example 5
    
      

  

    
        
            
                {{title}}
                Topics:
  
                
                    
                        {{x}}
                    
                
                
                    Subtopics:
  
                    
                        {{y}}
                    
                
            
        
    
    
        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?"
            ];
        });
    

  

输出：

示例 5