0
私は、HTMLで書かれたWebサイト用のメニューを持っていて、各ページにすべてを含めるのではなく（各ページを編集して何かを変更する必要があります）私はAngular（<div ng-include="menu.html"></div>）を使用してHTMLを含めています。角を使ってHTMLにJavascriptを実行しようとしています
ナビゲーションメニューをアニメーション化するために、付属のHTMLで実行する必要があるJavascript（外部.jsファイル）があります。私が実際にページに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);
};
掲載の答えの一つにコメントし@DrMintsものと同じですあなたのjavascriptの機能をhtmlに変換します。 –
@AmyBlankenshipどのように私はこれについてどうやって行くだろうか？私の知識が不足して申し訳ありません、以前はJavascriptについて深く掘り下げていませんでした。あなたがちょうどちょっとしたチュートリアルに私を送ることさえできるのであれば、それも素晴らしいでしょう！ – zaviiox
@zaviioxこれを見てくださいhttp://stackoverflow.com/questions/12197880/angularjs-how-to-make-angular-load-script-inside-ng-include –