我已经建立了一个网站，其中包括侧边栏和主要内容。我使用 ng-include 包含了侧边栏，但侧边栏无法运行。
<html>
<head>
<link href="lepwww/css/maincss.css" rel="stylesheet">
</head>
<body ng-app="myapp" ng-controller="dataController">
<div class="main-container">
<div ng-include="templates"></div>
</div>
<!-- Angular JS Scripts -->
<script src="lepwww/css/angular-1.6.1/angular.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-animate.min.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-aria.min.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-messages.min.js"></script>
<script src="lepwww/vendors/svg-assets-cache/svg-assets-cache.js"></script>
<script src="lepwww/vendors/angular-material/angular-material.js"></script>
<script>
var app = angular.module("myapp", ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
app.filter('startFrom', function () {
return (input, start) => {
start = +start; //parse to int
return input.slice(start);
}
});
app.controller("dataController", ["$scope", "$http", "$element",
function ($scope, $http, $element) {
$scope.templates = 'view/layout/sidebar.html';
}
]);
</script>
<script src="lepwww/vendors/jquery/dist/jquery.min.js"></script>
<script src="lepwww/js/dialog/zebra_dialog.js"></script>
<!-- Bootstrap -->
<script src="lepwww/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="lepwww/js/test.js"></script>
<script src="lepwww/js/utils.js"></script>
</body>
</html>
如果我直接复制代码来替换 nginclude，但能够运行。
这是我的侧边栏代码:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="console.html" class="site_title">
<div class="profile_pic">
<img src="lepwww/images/lep_icon.png" alt="..." width="50" height="50">
</div>
<span>LEP-DMS</span>
</a>
</div>
<div class="clearfix"></div>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side main_menu" style=" margin-top:12px">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li>
<a>
<i class="fa fa-home"></i>Home
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li>
<a href="console.html">Dashboard</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-tv"></i> Inventory
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li id="li_hardware">
<a href="hardware.html">Hardware</a>
</li>
<li id="li_software" class="">
<a href="software.html">Software</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
我也尝试将 javascript 文件包含在其中，但仍然无法正常工作。
尝试了切换jquery文件和angularjs文件的方法(javascript文件位置改变了，还是不行)。
知道这个问题是如何发生的吗？因为我检查控制台也没有发现任何错误。
谢谢。
最佳答案
如果您在控制台中找不到任何错误，这意味着代码没有被触发，或者代码被触发但选择器没有选择任何内容(也可能是选择器未定义，但在您的代码片段中很好处理，这可能是为什么它不输出未定义的异常)
接下来如果它被触发，检查你的侧边栏JavaScript是否在ng-include之前调用，只需使用断点来验证。
如果是之前触发的话，可以简单的输入<script>... <your js code to make sidebar work> ...</script>在 ng-include 文件的末尾。再次手动调用该函数，此时，它应该可以工作，因为您的 html 组件出现在 DOM 中。
关于javascript - AngularJS - ng include sidebar 将没有下拉菜单的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58229742/