Question

我有以下脚本标签。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js">
</script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $http({
            method : "GET",
            url : "http://localhost:5050/get_time"
        }).then(function successCallBack(response) {
            $scope.jsonResponse = response.data;
        }, function errorCallBack(response) {
            $scope.jsonResponse = "failed"
        });
    });
</script>
<div ng-app="myApp" ng-controller="myCtrl">

    <p>Response of JSON Below:</p>
    <h1>{{jsonResponse}} hi</h1>

</div>

当我在一个全新的html文件中运行它时，它将起作用！并返回一个json字符串，并按{{jsonResponse}}

中的说明进行打印

现在这是它不能使用的HTML文件。

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <title>Batch Program Visualization - angular and d3</title>
    <link rel="stylesheet" href="css/styles_showChart.css">
    <!--  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> -->
</head>

<body ng-app="Batch_Visualiser_chart" ng-controller="chartController">
<div class="container img.wide">
    <img src="css/banner.jpg" />
</div>

<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'TrainMap')">Train Map</button>
    <button id="defaultOpen" class="tablinks" onclick="openTab(event, 'ExecutiveDashboard')">Executive Dashboard</button>
    <button id="ProcDet" class="tablinks" onclick="openTab(event, 'ProcessDetails')">Process Details</button>
</div>
<div id="ExecutiveDashboard" class="tabcontent">
    <div id="parent">
        <div id="flowDiagram">
            <svg id="svgSumm" width="2500" height="500" left="20" right="20" top="20" bottom="50" style="background-color: #515b5f;border: 0px solid Black; display: flex "></svg>
            <div id="chartsContainer"></div>
        </div>
        <div id="halfDiv" style="word-wrap: break-word">
            <div class="column1" style="word-wrap: break-word">
                <!--Alternate way of loading html files, if iframe is not to be used -->
                <!--script>
                 document.getElementById("details").innerHTML='<object type="text/html" data="showOverallStatus.html"></object>';
               </script-->
                <iframe src="showCategoryDetail.html" style="background-color: #343434; word-wrap: break-word" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column2">
                <iframe src="showImpact.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column3">
                <iframe src="showMonthlyRunChart.html" width="410" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column4">
                <iframe src="showOverallSLA.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
        </div>
    </div>
</div>

<div id="ProcessDetails" class="tabcontent">
    <div id="parent2">
        <div id="flowDiagram2">
            <iframe id="showOtherTree" src="showTree.html" width="1900" height="450" frameborder="1" onload="" allowtransparency="false"></iframe>
        </div>
        <div id="chartsContainer"></div>


        <div id="halfDiv2">
            <div class="column">
                <iframe id="milestoneDetail" src="showMilestoneDetail.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column">
                <iframe id="milestoneRun" src="showTable.html" style="background-color: #343434" width="390" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column">
                <iframe id="milestoneJobs" src="showJobStatus.html" style="background-color: #343434" width="400" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
            <div class="column">
                <iframe id="childJobs" src="showChildJobs.html" style="background-color: #343434" width="420" height="320" frameborder="0" onload="" allowtransparency="false"></iframe>
            </div>
        </div>
    </div>
</div>

<div id="TrainMap" class="tabcontent">
    <div id="parent3">
        <div id="train_map">
            <iframe src="showFullTree.html" style="width: 100%;height:80%; background-color: #515b5f;"></iframe>
        </div>
    </div>
</div>





<work-history></work-history>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/d3.min.js"></script>
<script src = 'apps/showSummary.js'></script>

<script>
    document.getElementById("defaultOpen").click();

    function openTab(evt, tabName) {
        // Declare all variables
        var i, tabcontent, tablinks;
        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js">
</script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $http({
            method : "GET",
            url : "http://localhost:5050/get_time"
        }).then(function successCallBack(response) {
            $scope.jsonResponse = response.data;
        }, function errorCallBack(response) {
            $scope.jsonResponse = "failed"
        });
    });
</script>
<div ng-app="myApp" ng-controller="myCtrl">

    <p>Response of JSON Below:</p>
    <h1>{{jsonResponse}} hi</h1>

</div>



</div>

</body>
</html>

无论我将脚本放在哪里都不会执行，但是全新的独立HTML文件可以很好地工作。

我知道它不会执行，因为我到处都放置了alert（），它甚至没有像它不存在一样进入代码了？

有什么想法吗？

Answer 1

摆脱这部分并尝试一下（我从不相信注释掉的脚本）：

            <!--script>
             document.getElementById("details").innerHTML='<object type="text/html" data="showOverallStatus.html"></object>';
           </script-->

如果这不起作用，请一次移除一个iframe。

同样，您似乎要包含angular.min.js，然后重新包含一个可能的不同版本。尝试在添加的代码上方删除对angular.js的CDN引用。

Answer 2

第二个应用程序无法引导，因为仅允许一个ng-app指令。随后的ng-app伪指令将被忽略。

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <title>Batch Program Visualization - angular and d3</title>
    <link rel="stylesheet" href="css/styles_showChart.css">
    <!--  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> -->
</head>

<body ng-app="Batch_Visualiser_chart" ng-controller="chartController">
<div class="container img.wide">
    <img src="css/banner.jpg" />
</div>

<!-- ...  -->

<!-- ... -->

<div ng-app="myApp" ng-controller="myCtrl">

    <p>Response of JSON Below:</p>
    <h1>{{jsonResponse}} hi</h1>

</div>

</div>

</body>
</html>

从文档中：

使用ngApp时要牢记以下几点：


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

有关更多信息，请参见

AngularJS ng-app Directive API Reference

脚本标记不在HTML文件中执行，但是在新文件中执行吗？

2 个答案: