第二个 div 表达式不根据 <script> 块的位置进行计算

Question

如果我将包含 js 代码的 <script> 放在 <body> 的底部，则计算第二个 div 的表达式。如果它位于 <body> 的顶部或 <head> 中，则不会被评估。这是为什么？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!--If the script is here, the dvSecond div's expression is not evaulated-->
</head>
<body>
<!--If the script is here, the dvSecond div's expression is not evaulated-->
<div ng-app="myApp" id="dvFirst" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<div id="dvSecond" ng-controller="myCtrl1">
{{ firstName1 + " " + lastName1 }}
</div>

<!--If the script is here, the dvSecond div's expression IS evaulated-->
<script>
var dvSecond = document.getElementById('dvSecond');

angular.element(document).ready(function() {   
   angular.bootstrap(dvSecond, ['myApp1']);
});

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>

Answer 1

问题是 dvSecond 元素在 ready 函数之前获取并且它返回 NULL，它应该在 angular.element(document).ready(function() {});

angular.element(document).ready(function() { 
   var dvSecond = document.getElementById('dvSecond');
   angular.bootstrap(dvSecond, ['myApp1']);
});

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

angular.element(document).ready(function() { 
   var dvSecond = document.getElementById('dvSecond');
   angular.bootstrap(dvSecond, ['myApp1']);
});

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>
<!--If the script is here, the dvSecond div's expression is not evaulated-->
</head>
<body>
<!--If the script is here, the dvSecond div's expression is not evaulated-->
<div ng-app="myApp" id="dvFirst" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<div  id="dvSecond" ng-controller="myCtrl1">
{{ firstName1 + " " + lastName1 }}
</div>

<!--If the script is here, the dvSecond div's expression IS evaulated-->

</body>
</html>

第二个 div 表达式不根据 <script> 块的位置进行计算

2nd div expression not evaluating depending on location of <script> block

javascript

angularjs

domcontentloaded