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

Question

我有以下代码：

<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 内容添加到我的页面？我试图更改语法，但到目前为止没有任何效果。

非常感谢您抽出宝贵时间。

Answer 1

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

Answer 2

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

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

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

另外，如果您需要使用大括号在代码中插入 HTML，您会注意到默认情况下 angular 会在其文本表示中转换任何 html 实体，为此你可以使用

A) <div ng-bind-html="scopeObj.var"> quote doble quote 方法也适用于此

B) 如果你真的想使用花括号插入 html （并且强烈推荐你不要或仅在你确定你的 html 安全时使用）你需要做以下：

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

Answer 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>

如果不起作用请告诉我。

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

How to use ng-include with an html file in double curly brace notation {{ }}

javascript

angularjs

angularjs-ng-include