如何使用 AngularJS 将特定的 div 类或 id 加载到另一个 html 中？答案

【问题标题】：How to load the specific div class or id in to another html using AngularJS?如何使用 AngularJS 将特定的 div 类或 id 加载到另一个 html 中？
【发布时间】：2016-04-10 03:24:46
【问题描述】：

在 jQuery 中，可以使用加载函数的 classes 和 id 在另一个 HTML 中加载特定的选择器元素

例如：$('#id').load("http://www.thisiswhyimbroke.com li:first .someclass")

有没有什么方法可以在 AngularJS include 中做同样的事情，例如 ng-include？p>

【问题讨论】：

是的，您在问题中定义的指令相同
ng-include=" '//你的模板的url' "

标签： angularjs

【解决方案1】：

try this..
<div class="include-example" ng-class="template.class" ng-include="template.url">

【讨论】：

Mahesh：-我想包含
，从 detail.html 构造到 base.html 底部：
对吗？那就是我想从 details.html 中获取 html 的一部分（仅预加载器 html 构造）以包含在 base.html 上。
参考这个链接-看例子docs.angularjs.org/api/ng/directive/ngInclude

【解决方案2】：

是的！我今天想通了。在我的情况下，我是从同一个域加载的，但是在整个页面中加载（角度、引导程序等）是行不通的。

简而言之，您需要让拦截器捕获响应并对其进行处理。

首先，将您的 ng-include 指向您的网址。

<div ng-include="currentView.content.url"></div>

其次，我们需要拦截响应。就我而言，我知道我将始终加载#articleAnswer。

app.factory('templateInterceptor', function($q) {
return {
    response: function( response ) {
        var html = response.data.toString();
        if (html.indexOf('articleAnswer') !== -1) {  
            var parser = new DOMParser();
            var doc = parser.parseFromString(html,'text/html');
            var article = doc.querySelectorAll('#articleAnswer');
            response.data = article;
        }
        return response;
    }   
};
});

第三，将你刚刚创建的工厂添加到你的 $httpProvider 拦截器中。

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('templateInterceptor');
});

第四，您可能还希望这个位允许您加载受信任的 html。

app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist(['self']); 
});

我相信有人有更优雅的方式来做这件事，但希望这会有所帮助！

【讨论】：

【解决方案3】：

是的，角度有指令，用于在另一个 html 中包含模板

请查看这些示例
http://jsfiddle.net/mrajcok/mfha6/

`https://jsfiddle.net/mrajcok/9krVn/3/`

这两个例子对于 ng-include 来说都是富有成果的，并且还可以从这个问题What is the correct syntax of ng-include?得到帮助

【讨论】：