为什么我不能在给定的HTML页面中使用两个ng-app指令-AngularJS？

马权

2023-03-14

问题内容：

仅当我删除指令之一即ng-app-demo1和模型时，我才获得输出。为什么我不能同时工作两个ng-app。我是Angular
JS的新手，并建立了自己的基础知识。如果一次运行一个指令，我将获得所需的输出。因此，在此示例中，如果我删除了演示ng-
app，脚本和控制器，则会得到所需的输出。如果删除demo1 ng-app脚本和控制器，则第一部分工作正常。如何使两个指令同时工作？

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="UTF-8">
        <title>Event Registration</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
    </head>
    <body>

    <h1> Guru99 Global Event </h1>
    <script src="lib/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>
    <script src="lib/jquery-3.2.1.js"> </script>

    <div ng-app="DemoApp" ng-controller="DemoController">
        Tutorial Name: <input type="text"  ng-model="tutorialName"> <br>
        <br>
        This tutorial is {{tutorialName}}

    </div>

    <script type="text/javascript">

        var app = angular.module('DemoApp',[]);

        app.controller('DemoController',function($scope)
            {
              $scope.tutorialName = "Checking Angular JS" ;
            }

        );
    </script>

    <div ng-app="DemoApp1" ng-controller="DemoController1">
        <! behaviour >

        {{fullName("Guru","99")}}

    </div>

    <script type="text/javascript">

        var app = angular.module('DemoApp1', []);

        app.controller('DemoController1',function($scope)
        {

            $scope.fullName=function(firstName, lastName)
            {
                return firstName + lastName;
            }
        });

    </script>

    </body>
    </html>

输出是

 Guru99 Global Event
Tutorial Name:

This tutorial is Checking Angular JS
{{fullName("Guru","99")}}

问题答案：

从文档中：

使用时，请注意以下几点ngApp：

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

— AngularJS ng-
app指令API参考

为什么我不能在给定的HTML页面中使用两个ng-app指令-AngularJS？

相关阅读

相关文章

相关问答

相关工具

相关文档