bootstrap在不同的頁面中重用html標籤代碼

Question

我正在使用帶引導程序的angularJS。

我有以下的ResetAndRegisterCommon.html HTML代碼

<div class="error" 
    ng-show="resetRegisterForm.Email.$invalid&& resetRegisterForm.Email.$dirty"> 
    <span ng-show="resetRegisterForm.Email.$error"> 

     <div class="alert alert-warning"> 
      Warning! Please enter valid email address 
     </div> 
    </span> 
</div> 

我想重用上面的代碼中Mypage1.html和Mypage2.html

我試圖在Mypage1.html下面的代碼和Mypage2.html，但是html標記在Mypage1.html和Mypage2.html中完全不呈現。

<link rel="import" href="ResetAndRegisterCommon.html"> 

Answer 1

您需要使用JS來訪問導入文件的內容。雖然它確實很容易。

讓我們給你的<link>一個ID，所以我們可以稱之爲它。

<link rel="import" href="page.html" id="import"> 

現在我們用JS調用它

var doc = document.querySelector('#import').import; 

現在我們抓住從已導入

var error = doc.querySelector('.error'); 

然後我們克隆它，並把它添加到當前頁面的文檔的DOM

document.body.appendChild(error.CloneNode(true));