为什么我不能在给定的HTML页面中有两个ng-app指令 - AngularJS？ [英] Why can't I have two ng-app directives in a given HTML page - AngularJS?
问题描述
只有删除其中一个指令，即ng-app-demo1和模型，才能获得输出。为什么我不能同时使用两个ng-app。我是Angular JS的新手并且构建了我的基础知识。如果我一次运行一个指令，我会得到所需的输出。所以，在这个例子中，如果我删除了演示ng-app，脚本和控制器，我得到了所需的输出。如果我删除了demo1 ng-app脚本和控制器，我会让第一部分正常工作。如何让这两个指令同时工作？
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>
输出
Guru99 Global Event
Tutorial Name:
This tutorial is Checking Angular JS
{{fullName("Guru","99")}}
推荐答案
来自文档：
使用
ngApp时，请注意以下事项：
There are a few things to keep in mind when using
ngApp:
- 每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个
ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。 a>而不是。
- only one AngularJS application can be auto-bootstrapped per HTML document. The first
ngAppfound 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.
这篇关于为什么我不能在给定的HTML页面中有两个ng-app指令 - AngularJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
