你可以在从服务中检索到的HTML中使用Angular Binding Expression吗?

时间:2014-03-11 16:36:36

标签: javascript angularjs html-sanitizing

我有一个html片段来自一个由角度服务检索的mongo数据库。然后使用ngSanitize中的ng-bind-html指令在我的页面上清理此html代码段。我想知道如何将html片段内的表达式绑定到页面,这样当我绑定html时,绑定表达式在片段内执行。例如,这是我的div,我的html片段将绑定到:

                <div ng-bind-html="middle_snippet">

                </div>

这是从服务中获取的实际代码段。

    <p>WHY HERRRRO!!! {{myBinding}}</p>

这是我简单的控制器:

    var middleMainContent = $Content.content({slug: "home-bottom-middle"
    }, function () {
        console.log(JSON.stringify(middleMainContent));
        $scope.middle_snippet = middleMainContent.response.content.snippet;
        $scope.myBinding = 'VERY NICE BINDING';

    });

所以我的预期结果真的是html:

为什么HERRRRO !!!非常好的结合

然而,我得到了带花括号的原始html。任何想法都会有所帮助,因为我站在这里试图让它发挥作用。


更新:所以在阅读了关于编译服务并将它们与指令一起使用之后,正如Chandermani所提到的那样,我既开明又困惑。根据AngularJS团队使用$ compile时的“最佳实践”方法是在指令定义对象(DDO)中使用它,如此处所述http://docs.angularjs.org/api/ng/service/ $ compile。好吧,所以我创建了一个DDO,但是,我对DDO的compile:方法的内容感到困惑。以下是我到目前为止的情况:

var myModule = angular.module('html_compile');

myModule.directive('html_compiler', function factory(injectables) {
var directiveDefinitionObject = {
    priority: 0,
    template: $scope.snippet,
    replace: true,
    transclude: false,
    restrict: 'E',
    scope: false,
    compile: function compile(tElement, tAttrs) {
        return {
            pre: function preLink(scope, iElement, iAttrs, controller) { ... },
            post: function postLink(scope, iElement, iAttrs, controller) { ... }
        }
        // or
        // return function postLink( ... ) { ... }
    },
    // or
    // link: {
    //  pre: function preLink(scope, iElement, iAttrs, controller) { ... },
    //  post: function postLink(scope, iElement, iAttrs, controller) { ... }
    // }
    // or
    // link: function postLink( ... ) { ... }
    };
    return directiveDefinitionObject;
});

1 个答案:

答案 0 :(得分:0)

所以@Chandermani用$compile服务打了它头,当然这是在评论中链接的那个页面末尾的例子,然而,它有点令人困惑,因为有一个&#34;编译&#34;指令定义对象内的元素,在同一页面上列出。所以我想这个编译元素决定了你要在DDO中编译你正在创建的指令的方式和时间,底部的例子属于$compileProvider并创建一个指令。完整解释答案的博客位于:Your very own $compile service directive