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));