如何在 Angular 1.x 中使用多个根元素

Posted 2023-05-09

【中文标题】如何在 Angular 1.x 中使用多个根元素

【英文标题】：How to use multiple root element in angular 1.x

【发布时间】：2019-08-06 02:14:28

【问题描述】：

我是 Angular js 的初学者。我正在使用带有通用页眉和页脚的引导网站的角度。下面的代码运行良好。

当我尝试添加额外的插件根元素（如日历插件根元素）时出现问题。我不知道如何将一个或多个根元素与多个控制器结合起来。

任何人都可以帮助我实现这一目标。提前致谢。

var app = angular.module("myApp", []);
     angular.module('myApp', ['ui.rCalendar']);
     angular.module('myApp').controller('CalendarDemoCtrl', ['$scope', function($scope) 
                    -- --
    
);

var app = angular.module("myApp", []);

//menu
app.controller("menuController", function($scope) 
  $scope.menus = [  
    
        title: "Home", 
        action: "/test/1"
    ,
    
        title: "About", 
        action: "about.php"
    ,
    
        title: "Module", 
        action: "#", 
        menus: [
          
            title: "Calendar",
            action: "calendar.php"
          ,
          
            title: "Submenu 2",
            action: "#"
          
        ]
    ,
    
        title: "Form", 
        action: "form.php"
    
]
);

//iconbox   
app.controller('iconBox', function iconBox($scope) 
    $scope.servicebox = [
        
            "icon"      : "fas fa-shopping-cart",
            "title"     : "ng-app",
            "desc"      : "The ng-app directive tells AngularJS that this is the root element of the AngularJS application. All AngularJS applications must have a root element. You can only have one ng-app directive in your html document." 
        ,
        
            "icon"      : "fas fa-desktop",
            "title"     : "ng-controller",
            "desc"      : "The ng-controller directive adds a controller to your application. In the controller you can write code, and make functions and variables, which will be parts of an object, available inside the current HTML element." 
        ,
        
            "icon"      : "fas fa-lock",
            "title"     : "$scope",
            "desc"      : "The scope is the binding part between the HTML (view) and the javascript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller." 
        
    ];
);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>

<header ng-controller="menuController">
    <nav class="navbar navbar-expand-lg navbar-light fixed-top main-nav">
        <div class="container">
            <a class="navbar-brand" href="#">Logo</a>
            <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav text-uppercase ml-auto">
                    <li ng-repeat="menu in menus" class="nav-item dropdown">
                        <ng-template ng-if="menu.menus.length > 0">
                            <a target="_self" href="menu.action" class="dropdown-toggle nav-link" data-toggle="dropdown">menu.title</a>
                            <ul ng-if="menu.menus" class="dropdown-menu">
                                <li ng-repeat="submenu in menu.menus">
                                    <a target="_self" href="submenu.action" class="dropdown-item">submenu.title</a>
                                </li>
                            </ul>
                        </ng-template>
                        <ng-template ng-if="menu.menus.length == null">
                            <a target="_self" ng-click="" href="menu.action" class="nav-link">menu.title</a>
                        </ng-template>
                    </li>

                </ul>
            </div>
        </div>
    </nav>

</header>

<section class="sectionThree py-5" id="services" ng-controller="iconBox">
    <div class="container py-5">
        <div class="section-header text-center">
            <h3>AngularJS</h3>
            <p>We are always with you to make your project.</p>
        </div>
        <div class="row text-center mt-4">
            <div class="col-md-4 col-lg-4 pb-4 pb-md-0" ng-repeat="serviceitem in servicebox">
                <div class="service-box">
                    <i class="serviceitem.icon"></i>
                    <h3>serviceitem.title</h3>
                    <p>serviceitem.desc</p>
                </div>
            </div>
        </div>
    </div>
</section>

【参考方案1】：

我没有完全理解你的问题，但我可以告诉你，这部分是不正确的；

var app = angular.module("myApp", []);
angular.module('myApp', ['ui.rCalendar']);

您基本上使用了 'myApp' 模块的 setter 两次并覆盖了第一个。如果您需要两个模块，请为带有日历的模块创建一个不同的模块（不同的名称）：

angular.module('myCalendar', ['ui.rCalendar']);
angular.module('myCalendar').controller('CalendarDemoCtrl', ['$scope', function($scope) 
                -- --

然后将其插入到您的主模块中。

var app = angular.module("myApp", ['myCalendar']);

希望这会有所帮助！