Question

您好我是角色新手，我正在尝试在一个HTML文件中创建2个应用程序，但我没有得到第二个应用程序的输出，我得到第一个应用程序的正确输出。谁能告诉我我在哪里做错了？代码如下

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
    <html>
        <head>
            <title>The example for angular</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
            <style>
                input.ng-invalid {
                    background-color: lightcyan;
                }
    
            </style>
        </head>
        <body>
            <div ng-app="myApp">
                <div ng-controller="hello">
                    <p>{{firstname}}</p>
                </div>
                <div ng-init="Akshay=[
                            {firstname:'Sandeep',place:'mangalore'},
                    {firstname:'sirish', place:'haridwar'},
                    {firstname:'krish', place:'mathura'}]">
                    <div ng-repeat="name in Akshay">
                        {{name.firstname + ' ' + name.place}}
                    </div>
                </div>
                <div class="ang"></div>
                <form name="myForm">
                    <input type="email" name="emaild" ng-model="text">
                    <span ng-show="myForm.emaild.$error.email">Please enter the proper email</span>
                </form>
                <input type="text" ng-model="mytext" required>
            </div>
    
            <div ng-app="Appname" ng-controller="personCtrl">
                <input type="text" ng-model="firstName">
                <input type="text" ng-model="lastName">
                <p>His firstname was{{firstName}}</p>
                <p>His second name was {{lastName}} </p>
                <h1> His name was {{fullname()}} </h1>
    
            </div>
            <script>
                var app = angular.module("myApp", []);
                app.controller("hello", function ($scope) {
                    $scope.firstname = "Akshay";
                });
                app.directive("ang", function () {
                    return {
                        restrict: "C",
                        template: "This is a great time to be alive"
                    };
                });
    
                var appsec = angular.module('Appname', []);
                appsec.controller("second", function ($scope) {
                    $scope.firstName = "Bhagath";
                    $scope.lastName = "Singh";
                    $scope.fullname = function () {
                        return $scope.firstName + " " + $scope.lastName;
                    };
                });
    
    
            </script>
        </body>
    </html>

Answer 1

你不能在单个html文件中引导两个模块。根据Doc

每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，必须使用angular.bootstrap手动引导它们。 AngularJS应用程序不能互相嵌套

Answer 2

您可以使用手动引导方法同时引导两个模块

修改文档准备就绪时发生的两条boostrap行：

angular.element(document).ready(function() { 
    angular.bootstrap(document.getElementById('app1'), ['app1']);
    angular.bootstrap(document.getElementById('app2'), ['app2']);
});

以这种方式修改plnkr时，两个应用程序都开始正常运行。

现场演示：https://jsfiddle.net/samirshah1187/w7gv56t5/

Answer 3

正如@Samir所说，我们可以使用手动引导方法同时引导两个模块，我们需要定义id <div ng-app="myApp" id="myId"> <div ng-app="Appname" ng-controller="personCtrl" id="personId">，

然后在脚本

内的末尾添加这些行

angular.bootstrap(document.getElementById('myId'), ['myApp']); angular.bootstrap(document.getElementById('personId'), ['Appname']);

我们需要引导模块在同一页面中拥有多个ng-app。

第二个应用程序不适用于角度js

3 个答案: