时间戳

首页 > 解决方案 > div中的第二个Angularjs应用程序表达式不起作用

angularjs - div中的第二个Angularjs应用程序表达式不起作用

问题描述

我目前正在学习 Angularjs，并试图弄清楚为什么 2nd<div>中的表达式不起作用。它显示：

{{ firstName1 + " " + lastName1 }}

代替：

约翰1 Doe1

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<div ng-app="myApp1" ng-controller="myCtrl1">
{{ firstName1 + " " + lastName1 }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

var app1 = angular.module("myApp1", []);
app1.controller("myCtrl1", function($scope) {
    $scope.firstName1 = "John1";
    $scope.lastName1 = "Doe1";
});

</script>

</body>
</html>

编辑：

为了让它工作，我需要删除ng-app="myApp1"吗？我要传递什么参数才能使它angular.bootstrap()起作用？

标签： angularjs

解决方案

使用 ngApp 时需要注意以下几点：

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

请参阅AngularJS ng-app 指令 API 参考

推荐阅读