0
我有一個用HTML編寫的網站的菜單，而不是將每個頁面上的所有內容都單獨包含在內（這樣我就不得不編輯每個頁面來更改內容），我通過使用Angular包含HTML（<div ng-include="menu.html"></div>）。試圖在HTML上運行HTML時使用Javascript
我有一些JavaScript（外部.js文件），我需要在包含的HTML上運行，以便爲導航菜單設置動畫。如果我實際上在頁面上包含HTML，它可以正常工作。只有當我使用外部HTML（通過角ng-include），它不會。
我認爲這可能是一個問題，它沒有被正確定位？我真的不知道足夠的JavaScript來解決這個問題。
我也使用純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);
};
在我看來，你需要寫一個指令，結婚你的javascript功能到html。 –
@AmyBlankenship我將如何去做這件事？對不起，我缺乏這方面的知識，以前我還沒有深入研究Javascript。如果你甚至可以發送給我一些教程，那也會很棒！ – zaviiox
@zaviiox請看看這個http://stackoverflow.com/questions/12197880/angularjs-how-to-make-angular-load-script-inside-ng-include –