我有一个用HTML编写的网站菜单，而不是单独在每个页面上包含所有这些菜单（这样我就不得不编辑每个页面来改变一些东西），我通过使用包含了HTML Angular（<div ng-include="menu.html"></div>）。
我需要在包含的HTML上运行一些Javascript（外部.js文件），以便为导航菜单设置动画。如果我实际上在页面上包含HTML，它可以正常工作。只有当我将HTML外部（通过角度ng-include）制作成外部时才会这样做。
我认为这可能是一个问题，因为它没有正确定位？我真的不知道足够的javascript来解决这个问题。
我也在使用Pure CSS，因此大多数类都包含在HTML中。
HTML页面：
<body ng-app="">
<div ng-include="header.html"></div>
*rest of the page*
</body>
包含的HTML：
//Header for the page
<div id="topbar" class="pure-g">
<div class="pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5"> </div>
<div class="pure-u-22-24 pure-u-sm-20-24 pure-u-md-16-24 pure-u-lg-3-5">
<h1>Title</h1>
</div>
<div class="pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5"> </div>
</div>
//Navigation menu
<div id="menu" class="custom-wrapper pure-g">
//column 1
<div class="pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5"> </div>
//column 2
<div class="pure-u-22-24 pure-u-sm-20-24 pure-u-md-16-24 pure-u-lg-3-5 ">
//makes another row
<div class="pure-g">
//column 1
<div class="pure-u-1 pure-u-md-1-3" style="height: 2.1em">
<div class="pure-menu"> <a href="#" class="pure-menu-heading custom-brand" id="navTitle">Navigation</a> <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a> </div>
</div>
//column 2
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
//column 3
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
</ul>
</div>
</div>
</div>
</div>
//column 3
<div class="pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5"> </div>
</div>
使用Javascript：
function menuScript() {
(function (window, document) {
var menu = document.getElementById('menu')
, WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
function toggleHorizontal() {
[].forEach.call(document.getElementById('menu').querySelectorAll('.custom-can-transform'), function (el) {
el.classList.toggle('pure-menu-horizontal');
});
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
setTimeout(toggleHorizontal, 500);
}
else {
toggleHorizontal();
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
};
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
};
答案 0 :(得分：0)
所以你需要使用一个指令才能在没有太多复杂功能的情况下工作，下面是一个例子：
angular.module('myApp').directive('menu', menu);
function menu() {
return {
restrict: 'EA',
template: "<div id=\"topbar\" class=\"pure-g\">\n" +
" <div class=\"pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5\"> </div>\n" +
" <div class=\"pure-u-22-24 pure-u-sm-20-24 pure-u-md-16-24 pure-u-lg-3-5\">\n" +
" <h1>Title</h1>\n" +
" </div>\n" +
" <div class=\"pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5\"> </div>\n" +
"</div>\n" +
"\n" +
"<div id=\"menu\" class=\"custom-wrapper pure-g\">\n" +
"\n" +
" <div class=\"pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5\"> </div>\n" +
"\n" +
" <div class=\"pure-u-22-24 pure-u-sm-20-24 pure-u-md-16-24 pure-u-lg-3-5 \">\n" +
" <div class=\"pure-g\">\n" +
"\n" +
" <div class=\"pure-u-1 pure-u-md-1-3\" style=\"height: 2.1em\">\n" +
" <div class=\"pure-menu\"> <a href=\"#\" class=\"pure-menu-heading custom-brand\" id=\"navTitle\">Navigation</a> <a href=\"#\" class=\"custom-toggle\" id=\"toggle\"><s class=\"bar\"></s><s class=\"bar\"></s></a> </div>\n" +
" </div>\n" +
"\n" +
" <div class=\"pure-u-1 pure-u-md-1-3\">\n" +
" <div class=\"pure-menu pure-menu-horizontal custom-can-transform\">\n" +
" <ul class=\"pure-menu-list\">\n" +
" <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Home</a></li>\n" +
" <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">About</a></li>\n" +
" <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Contact</a></li>\n" +
" </ul>\n" +
" </div>\n" +
" </div>\n" +
"\n" +
" <div class=\"pure-u-1 pure-u-md-1-3\">\n" +
" <div class=\"pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform\">\n" +
" <ul class=\"pure-menu-list\">\n" +
" <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">Yahoo</a></li>\n" +
" <li class=\"pure-menu-item\"><a href=\"#\" class=\"pure-menu-link\">W3C</a></li>\n" +
" </ul>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
"\n" +
" <div class=\"pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5\"> </div>\n" +
"</div>",
scope: {
},
controller: function () {
var menu = document.getElementById('menu')
, WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
function toggleHorizontal() {
[].forEach.call(document.getElementById('menu').querySelectorAll('.custom-can-transform'), function (el) {
el.classList.toggle('pure-menu-horizontal');
});
}
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
setTimeout(toggleHorizontal, 500);
} else {
toggleHorizontal();
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
}
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
}
};
这是一个快速指令，只需在HTML页面中使用<menu></menu>即可使用。但是你可以做很多事情来改善这一点，例如改变templateUrl的模板：＆＃39; path_to_your_html＆＃39;并将控制器更改为更多角度（是的，我刚刚编写了这个词）。 Angular有一个你可以使用的jQueryLite内置，你可以使用$timeout wrapper并用ng-class改变你的类dinamicaly。
答案 1 :(得分：0)
在基本上向我的朋友发送了整个事物的.zip文件之后，我们才能让它运转起来。
由于JS需要处理单独的html文件，我们使用AngularJS使JS成为外部文件的ng-controller。我们能够让它工作，现在一切都很好:)）
这与@DrMints对其中一个答案发表的评论相同