angular-ui-router javascript view

angular-ui-router javascript view

本文关键字：view javascript angular-ui-router      更新时间：2023-09-26

我正在用angularJS和ui-router做一个网站。

我的问题是，我有一个自定义的Javascript文件，我的下拉菜单和其他资源在我的页面。所有的工作很好，当我写的html直接在我的索引页或使用PHP包括包括在页面的代码。但是当使用ui-route时，我的Javascript代码不能与视图内的对象一起工作，我不知道为什么。

我尝试了延迟加载，但是失败了。

这是我的HTML代码: 
<body ng-app="MuRings">
<div ui-view="menu"></div>

我的路由器代码:

var app = angular.module("MuRings", ["ui.router"])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('home', {
        url: "/",
        views: {
            "topContacts": { templateUrl: "views/topContacts.html"},
            "menu": { templateUrl: "views/navbar.html"},
            "headerTitle": { templateUrl: "views/headerTitle.html"}
        }
    });
$urlRouterProvider.otherwise("/");
});

我正在加载这个导航栏到ui-view:

<nav class="nk-navbar nk-navbar-top nk-navbar-sticky nk-navbar-autohide">
        <div class="container">
            <div class="nk-nav-table">
                <a href="index.html" class="nk-nav-logo">
                    <img src="assets/images/logo.png" alt="" width="90">
                </a>
                <ul class="nk-nav nk-nav-right hidden-md-down" data-nav-mobile="#nk-nav-mobile">
                    <li class="active">
                        <a href="index.html">Home</a>
                    </li>
                    <li class=" ">
                        <a href="#">Sobre o Jogo</a>
                    </li>
                    <li class=" nk-mega-item nk-drop-item">
                        <a href="#">Guias</a>
                        <div class="dropdown">
                            <div class="bg-image" style="background-image: url('assets/images/bg-menu.jpg')"></div>
                            <ul>
                                <li>
                                    <ul>
                                        <li class="  ">
                                            <a href="element-carousels.html">                Carousels</a>
                                        </li>
                                        <li class="  ">
                                            <a href="element-image-boxes.html">                Image Boxes</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="  nk-drop-item">
                        <a href="#"> Media </a>
                        <ul class="dropdown">
                            <li class="  ">
                                <a href="./pages/gallery-3-col.html"> Fotos </a>
                            </li>
                            <li class="  ">
                                <a href="./pages/videos-2-col.html"> Videos </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

并尝试在JS文件

中做这样的事情
// add link effect for navbar
$('.nk-navbar ul > li > a:not(.btn):not(.nk-btn):not(.no-link-effect)').addClass('link-effect-4');

我已经能够通过将所有脚本导入到html文件并将其加载到ui-view中来解决这个问题。

这是一个巨大的变通，并不是最好的解决方案。我这样做是因为我的Jquery脚本有6000多行，我要花很多时间来重写它

相关文章：