AngularJS如何在没有控制器的情况下对ng-routed文件应用js更改

时间:2016-05-17 12:13:14

标签: angularjs angular-ui-router

我是角度js的新手,我必须对ng-routed页面应用javascript更改,如何在没有控制器的情况下执行此操作。 的的index.html

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="/routing/about">About</a>
                </li>
                <li>
                    <a href="/routing/services">Services</a>
                </li>
                <li>
                    <a href="/routing/contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>


<section ng-view="" class="top-page">
</section>

<script src="script/jquery.min.js"></script>
<script src="script/bootstrap.min.js"></script>
<script src="script/jquery.easing.min.js"></script>
<script src="script/angular.js"></script>
<script src="script/angular-route.min.js"></script>
<script src="script/app.js"></script>
<script src="script/controller.js"></script>
<script>
    $("#home").html("Home page");
</script>

home.html的

<h1 id="home"></h1>

app.js

 var app = angular.module("LearnRouting", ['ngRoute'])
        .config(function($routeProvider, $locationProvider){
            $routeProvider.html5
            $routeProvider
            .when("/",{
                templateUrl:"pages/home.html",
                controller:"homeController"
            })
            .when("/about",{
                templateUrl:"pages/about.html",
                controller:"homeController"
            })
            .when("/contact",{
                templateUrl:"pages/contact.html",
                controller:"homeController"
            })
            $locationProvider.html5Mode(true);
        });

这是我的代码。 home.html加载javascript不影响其各自页面中的id值。我需要在home.html加载时,家庭ID应该受到影响。怎么做?。有了这个帮助,我只需要处理相关的项目。提前谢谢。

2 个答案:

答案 0 :(得分:0)

这是因为您的jquery在页面加载之前和路由器连接之前运行。您应该将jquery代码移动到$(document).ready块,并将其移动到您希望它执行的html页面。如果它只应用于某个页面,请不要将它保留在您的根页面上子页面。

答案 1 :(得分:0)

我通过谷歌搜索得到答案。我们无法为路由文件加载索引脚本文件。所以我做了如下: 的的script.js

$("#home").html("Home page");

并将script.js添加到home.html

<强> home.html的

<h1 id="home"></h1>
<script src="script/script.js"></script>

它对我有用。如有任何其他建议,请回答。