メインページを離れずにHTMLファイルを分割しようとしています

Question

私はWebアプリケーションを構築していますが、次のコードを使用してポップアップフォームを表示しています。

<a href="#x" class="overlay" id="addregion_form"></a> 
<div class="popup"> 
    <h2>Add Region</h2> 
    <a class="closeBut" href="Main.html#close" ng-click="showAdminMenuContainer()"></a> 
</div> 

今ではすべてのmain.htmlをである私のアプリケーションは、あまりにも大きな成長してきたと私は別のHTMLファイルで何かのこの種を載せていきたいと思います。そして、このように私のポップアップへのリンク：

<div class="addbutton">      
    <div>        
      <a href="AddRegion.Html#addregion_form" id="addregion_pop">ADD</a>        
    </div> 
</div> 

は別のファイルAddRegion.html作品を追加しますが、ポップアップが完全に空の画面にジャンプします。メインページから基本的に私は何とかmain.htmlを中に埋め込まれている素敵な小さなファイルで作業しても、このようにそれらを参照できるようにしたい：

<a href="#addregion_form" id="addregion_pop">ADD</a> 

私はすでに「head'sectionでそれらを追加してみました、しかし、それはトリックを行うように見えません...

Answer 1

あなたは角度（あなたのコードはng-clickです）を使用しているようです。私はあなたがhttps://github.com/angular-ui/ui-routerを調べることをお勧めします。単一のmain.htmlファイルと別々のファイルに分割された小さなコード（分割と征服、懸念の分離）

私はこれが役立つことを願っています。

答えが正しい方向にあなたを指摘した場合は、acceptedとして答えをマークすることを忘れないでください：D

Answer 2

は、あなたはjavascriptでイベントリスナーを添付して、例えば、ユーザが「ADD」クリックしたときに、いくつかのアクションを実行する必要がありますリンク。 次に、他のHTMLファイルをXHR（XMLHttpRequest）経由でドキュメントに読み込むことができます。

また、javascriptでHTML構造を構築して、文書に追加することもできます。

あなたにとって最良の方法は、jqueryのようないくつかのjavascriptフレームワークを使用することです。あなたはすでに<a>タグにバインドされているいくつかのangularjs属性を持っています。 jqueryを使用しても問題がなければ。そのはるかに簡単なスタート:)

に例えば、それはjqueryのだったとあなたはbodyタグを終了する前にこのコードを追加することができ、他のhtmlファイルをロードしたい場合：

$(document).ready(function() { 
$('#addregion_pop').on('click', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
      url: 'AddRegion.html', 
      method: 'get', 
      dataType: 'html',     
      success: function (response) { 
       $(body).append(response); 
      } 
    }); 
}); 
}); 

Answer 3

氏リスターからの溶液を、ましたうまく動作します。 Jqueryを使用してHTMLファイルを含める

私は以下のことを行いました。

• J-クエリメインスクリプトが含ま

• はこの小さな機能

  $(document).ready(function() { $("#Panel").load("/Partials/Panel.html"); $("#WelcomeText").load("/Partials/WelcomeText.html"); });

• はTHI <div id ="Panel"> </div>