gpt4 book ai didi

javascript - 多个 ng-app 如何以 Angular 工作(为什么这样的行为?)

转载 作者:行者123 更新时间:2023-11-30 08:33:19 26 4
gpt4 key购买 nike

我尝试在应用程序中提供两个 ng-app,当我提供两个 ng-app 时

 <body>
<div ng-app="A">
<div ng-controller="AC">
</div>
</div>


<div ng-app="B">
<div ng-controller="BC">
</div>
</div>

</body>

然后第二个 ng-app 不起作用。

但是当我将第一个 ng-app="A"的范围从 div 更改为 body 时,两者都可以像

<body ng-app="A">
<div>
<div ng-controller="AC">
</div>
</div>


<div ng-app="B">
<div ng-controller="BC">
</div>
</div>
</body>

谁能告诉我为什么会出现这种行为,因为我对 Angular 还很陌生。我想知道为什么它会起作用,因为我没有在第二个上调用 angular.bootstrap。我尝试搜索,但在将 ng-app 的范围从 div 更改为 body 时,我不知道它是如何工作的。

找到相同的 https://jsfiddle.net/maddyjolly2112/wyfd0djp/1/ 的 fiddle 并介意将 js 复制到相同的 .

最佳答案

文档说:在实例化多个 Angular 应用程序时不要使用 ngApp

你不能这样做的原因 is laid out in the docs for the ngApp directive .

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 applications cannot be nested within each other.

但是引导多个 Angular 应用程序是可能的...

收件人bootstrap multiple Angular apps ,你必须引用每一个,并且它们在逻辑上不能嵌套,或者共享一个元素;他们需要彼此分开。因此,您不能使用指令 ngApp:

  <html>
<head></head>
<body>
<script src="angular.js"></script>
<div id="appElementA"></div>
<div id="appElementB"></div>
<script>
var app = angular.module('A', [])
.controller('AB', function($scope) {
$scope.greeting = 'Welcome!';
});
var appElementA = document.getElementById('divAppA');
angular.bootstrap(appElementA, ['A']);
var bApp = angular.module('B', [])
.controller('BB', function($scope) {
$scope.greeting = 'Welcome to B app!';
});
var appElementB = document.getElementById('divAppB');
angular.bootstrap(appElementB, ['B']);
</script>
</body>
</html>

上面的代码将是您如何为您的应用程序做的。然后,您必须确保将 Controller 分配给正确的 Angular 应用程序(appbApp,在上面的示例中。)

但不要嵌套它们!

当你嵌套它们时你声称它“有效”,但你应该知道 that it doesn't work ,它只是不会崩溃。不要嵌套多个 Angular 应用程序。您会遇到奇怪的问题,尤其是当您有多个同名绑定(bind)到 $rootScope 的变量时。

但是你可以嵌套它们而不会产生不良影响,对吧?

如果您打算嵌套两个 Angular 应用程序;这是可能的,但非常特定于版本并且容易以奇怪的方式中断。 This Stack Overflow answer talks about it .

关于javascript - 多个 ng-app 如何以 Angular 工作(为什么这样的行为?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34725602/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com