如何在双大括号表示法｛｛｝｝中使用ng-include和html文件

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

本文关键字：ng-include 文件 html 表示      更新时间：2023-10-14

我有以下代码：

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

非常感谢您抽出时间。

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

src是ng include的角度指令部分，不需要大括号，可以进行

A） 在具有存储在范围变量或对象中的html文件的字符串名称的情况下的CCD_ 4；

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

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

A） <div ng-bind-html="scopeObj.var">也是报价多臂报价方法应该适用于该

B） 如果你真的想使用大括号来插入html（强烈建议你不要使用大括号，或者只有当你确信你的html是安全的时才使用），你需要做以下操作：

  • 将角度消毒模块导入到您的项目中，并将"ngSanitize"注入到您的角度模块中

    • 创建这样的筛选器：

    .filter（'unsafe'，函数（$sce）{返回函数（val）{return$se.trustAsHtml（val）；}；})

    • 然后在你的html代码中
    ｛｛scopeObj.var|unsafe｝｝

如下所示。你快到了。

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

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

相关文章：