javascript-如何使ng-bind-html编译angularjs编码

我正在使用angularjs 1.2.0-rc.3。 我想将html代码动态地包含到模板中。 为此,我在控制器中使用:

html = "<div>hello</div>";
$scope.unicTabContent = $sce.trustAsHtml(html);

在模板中,我得到了:

<div id="unicTab" ng-bind-html="unicTabContent"></div>

它适用于常规html代码。 但是,当我尝试放置角度模板时,它不会被解释,它仅包含在页面中。 例如,我想包括:

<div ng-controller="formCtrl">
    <div ng-repeat="item in content" ng-init="init()">
    </div>
</div>

非常感谢

Clement Roblot asked 2020-01-13T19:37:43Z
8个解决方案
77 votes

该解决方案不使用硬编码模板,您可以编译嵌入在API响应中的Angular表达式。


步骤1。安装此指令:[https://github.com/incuna/angular-bind-html-compile]

步骤2.将指令包括在模块中。

angular.module("app", ["angular-bind-html-compile"])

步骤3.在模板中使用指令:

<div bind-html-compile="letterTemplate.content"></div>

结果:

控制器对象

 $scope.letter = { user: { name: "John"}}

JSON回应

{ "letterTemplate":[
    { content: "<span>Dear {{letter.user.name}},</span>" }
]}

HTML输出=

<div bind-html-compile="letterTemplate.content"> 
   <span>Dear John,</span>
</div>

为了参考起见,以下是相关指令:

(function () {
    'use strict';

    var module = angular.module('angular-bind-html-compile', []);

    module.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);
}());
Ryan.lay answered 2020-01-13T19:38:27Z
19 votes

这就是我所做的,不知道这是否是angular wayTM,但是它有效并且非常简单;

.directive('dynamic', function($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watch(attrs.dynamic, function(html) {
                $compile(element.html(html).contents())(scope);
            });
        }
    };
});

所以;

<div id="unicTab" dynamic="unicTabContent"></div>

编辑:我找到了角度的方式,这是非常简单的。

$templateCache.put('unicTabContent', $sce.trustAsHtml(html));
<div id="unicTab" ng-include="'unicTabContent'"></div>

无需自行编写指令或执行任何操作。但这是一次绑定的交易,它不会像自定义指令那样看到对html所做的更改。

Hashbrown answered 2020-01-13T19:39:00Z
2 votes

正如Vinod Louis在评论中所说,做到这一点的最佳方法是使用模板。 我必须在常规代码之外定义一个模板,例如,我在index.html中添加了该代码:

<script type="text/ng-template" id="unic_tab_template.html">
    <div ng-switch on="page">
        <div ng-switch-when="home"><p>{{home}}</p></div>
        <div ng-switch-when="form">
            <div ng-controller="formCtrl">
                <div ng-repeat="item in content">{{item.name}}:{{item.value}}</div>
            </div>
        </div>
        <div ng-switch-default>an error accured</div>
    </div>
</script>

该模板是有条件的,因此根据$ scope.page的值,它会在3个模板之间切换(第三个是错误处理程序)。 要使用它,我有:

<div id="unicTab" ng-controller="unicTabCtrl">
    <div ng-include="'unic_tab_template.html'"></div>
</div>

这样,我的页面会根据unicTabCtrl控制器内的$ scope改变。

总结一下,很难实现插入angularsjs模板接缝的想法($ compile seams是解决方案,但我无法使其工作)。 但是,您可以使用条件模板。

Clement Roblot answered 2020-01-13T19:39:34Z
2 votes

我试图做同样的事情,并且遇到了这个模块。

[http://ngmodules.org/modules/ng-html-compile]

我只包含了它,然后就可以使用“ ng-html-compile”代替“ ng-bind-html”

nbarth answered 2020-01-13T19:40:03Z
1 votes

一种方法是使用指令插入包含角度表达的自定义模板

<div id="unicTab" unic-tab-content></div>
app.directive("unicTabContent",function(){
   return {
      restrict:"A",
      template:'{{unicTabContent}}'
   }
})
charlietfl answered 2020-01-13T19:40:23Z
1 votes

我在不使用模板的情况下解决当前应用中类似问题的解决方案(不是很好,但是可以使用):

directive('ngBindHtmlCompile', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        compile: function compile(tElement, tAttributes, transcludeFn) {
            return function postLink(scope, element, attributes) {
                scope.$watch(function() {
                    return scope.$eval(attributes.ngBindHtml);
                }, function(newValue, oldValue) {
                    $compile(element.children())(scope);
                });
            };
        }
    };
}]);

它在同一元素上需要ng-html-compile,并在用ngBindHtml进行更改后编译元素内容。

<div id="unicTab" ng-bind-html="unicTabContent" ng-bind-html-compile></div>

ng-html-compile看起来很相似,但是乍一看,在更改模板内容时不会重新计算。 但是我还没有尝试过。

Lukasz Frankowski answered 2020-01-13T19:40:52Z
0 votes

下面的代码使用Angular内置的$ interpolate和$ sce对象更加简单。 在执行指令中需要执行的任何自定义操作时,首先将$ interpolate和$ sce Angular对象注入指令中。

amqApp.directive('myDir', ['$interpolate', '$sce', function ($interpolate,$sce ) {...}

然后创建在导入的html表达式中找到的所有作用域变量...

$scope.custom = 'Hello World';

接下来使用$ interpolate处理您的自定义HTML及其表达式...然后确保在绑定之前使用$ sce对象将其信任为HTML ...

var html = $interpolate('<b>{{custom}}</b>')($scope);    
$scope.data = $sce.trustAsHtml(html);

最后,在您的视图中,只需确保在视图显示中使用带有“ ng-bind”或“ ng-bind-html”元素。 我发现$ sce片段如果不将其绑定到html模板中,则不会将HTML显示为HTML(将其显示为文本)。

<span ng-bind-html="data"></span>

您应该以粗体显示...

你好,世界

我使用此技巧从web.config中以自定义角度{{expressions}}导入文本/ HTML。

Stokely answered 2020-01-13T19:41:39Z
0 votes

基于内置模板的@ clement-roblot简化了很多解决方案。

控制器:

app.controller('TestCtrl', [
    '$scope',
    '$templateCache',
    function ($scope, $templateCache) {
        $templateCache.put('test.html', '2 + 2 = {{ 2 + 2 }}');
    }
]);

视图:

<div ng-include="'test.html'"></div>
Stalinko answered 2020-01-13T19:42:08Z
translate from https://stackoverflow.com:/questions/19726179/how-to-make-ng-bind-html-compile-angularjs-code