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的角度指令部分，不需要花括号，你可以做

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">引用doble引用方法也适用于

B）如果你真的想使用花括号来插入html（以及你不高兴或仅在你确定你的html是安全的时候使用它），你需要做以下事情：

将angular-sanitize模块导入您的项目并注入＆＃39; ngSanitize＆＃39;你的角度模块
- 创建一个这样的过滤器：
.filter（＆＃39;不安全＆＃39;，功能（$ sce）{ return function（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>

让我知道是否有效。

如何在双花括号表示法{{}}中使用带有html文件的ng-include

3 个答案: