如何在双花括号符号 {{ }} 中将 ng-include 与 html 文件一起使用答案

【问题标题】：How to use ng-include with an html file in double curly brace notation {{ }}如何在双花括号符号 {{ }} 中将 ng-include 与 html 文件一起使用
【发布时间】：2015-02-13 14:40:28
【问题描述】：

我有以下代码：

<div  ng-repeat="pTabs in child.productTabs" ng-click="toggleProductTab($index)" ng-if="productTabIsActive(pTabs, $index)">
    <div ng-repeat="specs in pTab.additionalSpecs">
        <p>{{specs.content}}</p>  <!--Displays url-->
        <div ng-include  src = {{specs.content}}></div>  <!--My attempt to display the html content-->
    </div>
</div>

{{specs.content}} 是一个 html 文件，其中包含我想在页面上使用的 html。当我将其包装在 <p> 标记中时，该 URL 在我的页面上显示为文本。如何使用 ng-include 将 html 内容添加到我的页面？我试图改变语法，但到目前为止没有任何效果。

非常感谢您的宝贵时间。

【问题讨论】：

标签： javascript angularjs angularjs-ng-include

【解决方案1】：

据我所知，您不必在 angular 指令中使用花括号表示法。使用ng-include src = specs.content

【讨论】：

【解决方案2】：

src 是 ng-include 的角度指令部分，不需要花括号，你可以这样做

A) <div ng-include src="scopeObj.prop"> 如果将 html 文件的字符串名称存储在范围变量或对象中；

B) <div ng-include src="'template.html'"> 在您的 html 代码中直接插入字符串的情况下（注意双引号和单引号）

如果您需要使用花括号在代码中插入 HTML，您会注意到默认情况下，角度转换其文本表示中的任何 html 实体，因为您可以使用

A) <div ng-bind-html="scopeObj.var"> 也应该使用双引号引用方法

B) 如果您真的想使用花括号插入 html（并且非常推荐您不要或仅在确定您的 html 安全时使用），您需要执行以下操作：

将 angular-sanitize 模块导入您的项目并将“ngSanitize”注入您的 Angular 模块
- 像这样创建一个过滤器：
.filter('unsafe',function ($sce) { 返回函数（val）{ 返回 $sce.trustAsHtml(val); }; })
- 然后在您的 html 代码中
{{ scopeObj.var |不安全 }}

【讨论】：

【解决方案3】：

它很简单，如下所示。你快到了。

<div  ng-repeat="pTabs in child.productTabs" ng-click="toggleProductTab($index)" ng-if="productTabIsActive(pTabs, $index)">
        <div ng-repeat="specs in pTab.additionalSpecs">
            <p>{{specs.content}}</p>  <!--Displays url-->
            <div ng-include  src = "{{specs.content}}"></div> 

           // My ans- here I'm using  src="{{specs.content}}". Note: I'm wrapping curly braces by quotes. I assume specs.content gets required template path. eg. $scope.specs.content='templates/index.html';
        </div>
    </div>

如果不起作用，请告诉我。

【讨论】：