为什么在给定的 HTML 页面中不能有两个 ng-app 指令 - AngularJS? [英] Why can't I have two ng-app directives in a given HTML page - AngularJS?

查看：29
本文介绍了为什么在给定的 HTML 页面中不能有两个 ng-app 指令 - AngularJS?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

仅当我删除指令之一，即 ng-app - demo1 和模型时，我才会得到输出.为什么我不能让两个 ng-app 同时工作.我是 Angular JS 的新手，正在建立我的基础知识.如果我一次运行一个指令，我会得到所需的输出.所以，在这个例子中，如果我删除演示 ng-app、脚本和控制器，我会得到所需的输出.如果我删除了 demo1 ng-app 脚本和控制器，我的第一部分工作正常.如何让两个指令同时工作?

<html lang="en" xmlns="http://www.w3.org/1999/html"><头><meta charset="UTF-8"><title>活动注册</title><link rel="stylesheet" href="css/bootstrap.css"/><身体><h1>Guru99 全球活动 </h1><script src="lib/angular.min.js"></script><script src="lib/bootstrap.js"></script><script src="lib/jquery-3.2.1.js"><div ng-app="DemoApp" ng-controller="DemoController">教程名称:<br><br>本教程是{{tutorialName}}

<script type="text/javascript">var app = angular.module('DemoApp',[]);app.controller('DemoController',function($scope){$scope.tutorialName = "检查 Angular JS" ;});<div ng-app="DemoApp1" ng-controller="DemoController1"><!行为>{{fullName("Guru","99")}}

<script type="text/javascript">var app = angular.module('DemoApp1', []);app.controller('DemoController1',function($scope){$scope.fullName=function(firstName, lastName){返回名字+姓氏；}});</html>

输出为

 Guru99 全球活动教程名称:本教程是检查 Angular JS{{fullName("Guru","99")}}

解决方案

来自文档:

<块引用>

在使用 ngApp 时需要记住以下几点:

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

—AngularJS ng-app 指令 API 参考

I get the output only if I remove one of the directives i.e. ng-app - demo1 and the models. Why I can't have two ng-app working at the same time. I am new to Angular JS and building up my fundamentals. I get the desired output if I run one directive at a time. So, in this example if I remove the demo ng-app, scripts and controller, I get the desired output. If I remove the demo1 ng-app scripts and controller, I get the first part working fine. How can I get both the directives working at the same time?

<!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>

The output is 

 Guru99 Global Event
Tutorial Name:

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

解决方案

From the Docs:

There are a few things to keep in mind when using ngApp:

  • only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.

— AngularJS ng-app Directive API Reference

这篇关于为什么在给定的 HTML 页面中不能有两个 ng-app 指令 - AngularJS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆