javascript - Angular 中 ng-view 无法加载 JS 代码的解决方法？-PHP中文网问答

大家好，今天在用 MEAN 堆栈做一个网站的时候，创建了一个通用的模版 index.html。把 <head>、<header> 以及 <footer> 都创建好了，想用 ng-view 和其他的一些 html 文件来作为页面主要的内容。

我在用 ng-view 加载一个其他页面 main.html 的时候，发现如果把 main.html 所需要的 JS 代码放在 index.html 里面的话，还没加载出 main.html 的时候代码就已经运行了；而放在 main.html 末尾的话，由于 ng-view 的特性 JS 不会被加载。

以下是 index.html 的代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">

        <link rel="stylesheet" href="stylesheets/style.css">
        <link rel="icon" href="images/Steering-wheel.png">
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
        <script src="javascripts/TYDApp.js"></script>
    </head>
    <body ng-app="TYDApp">
        <header>
            <p id="logo">
                <p>Teach Yourself Driving</p>
            </p>
            <nav> 
                <a href="#">Home</a>
                <a href="#/game">Game</a>    
                <a href="#/rules">Game Rules</a>
                <a href="#/promotion">Promotion</a>
                <a href="#/references">References</a>
                <a href="#/account"><img src="images/account.png"></a>
            </nav>
        </header>
        <p ng-view></p>
        <footer>
            <p class="footer-left">
                <ul>
                    <li>Last Modified Date: <span id="lastMo"></span></li>
                    <li>Current Date: <span id="cDate"></span></li>
                </ul>
            </p>
            <p class="footer-right">
                <p>Teach Yourself Driving</p>
            </p>
        </footer>

    <script src="javascripts/dateNTime.js"></script>
</body>

以下是 main.js 的代码：

<p class="home-table">
    <p class="table-row">
        <p class="table-cell main-cell">
            <article class="text">
                <h2>Are you beginning to drive?</h2>
                <p>This website is built to help people who have need in enhancing road rules. Typically the people who are new to dirving and have troubles in dealing with complex traffic in real life.</p>
            
                <h2>Are you tired of memorizing rules?</h2>
                <p>Learning via a game is much more effective than memorizing only, it can help you abosorb knowledges much quickly without feeling bored.</p>
                        
                <h2>You have come to the right place!</h2>
                <p>Get rid of the boring text version of road rules, let's try "Teach Yourself Driving" now! Click the steering wheel on the right.</p>
                    
            </article>
        </p>
                
        <aside id="startAside" class="table-cell game-cell text box game-p">
            <a href="game"><img src="images/steering-wheel-bg.png" alt="Start background"></a>
        </aside>
    </p>
</p>

<script src="javascripts/startGame.js"></script>

我想请问一下大家遇到这样的情况，如何才能解决这样的问题，让 JS 能够成功运行呢？

谢谢大家！