您可以使用HTML里面绑定角前pression从服务中检索？ [英] Can you use Angular Binding Expression inside HTML retrieved from Service?

问题描述

我有来源于角度服务检索到的蒙戈dB的HTML代码段。这个HTML片段，然后我的网页上使用 NG-绑定-HTML 从ngSanitize指令消毒。我想知道我怎么可以绑定一个前pression内HTML片段到网页上，这样，当我绑定HTML绑定前pression的片段内部执行。例如，这里是我的div在我的HTML代码段将被绑定到：

 ＆LT; D​​IV NG绑定-HTML =middle_snippet＆GT;                ＆LT; / DIV＆GT;
 

和这里是实际的片断会从服务拉出。

 ＆LT; P＆GT;为什么HERRRRO！ {{myBinding}}＆下; / P＆GT;
 

和我的继承人简单的控制器：

  VAR middleMainContent = $ Content.content（{塞：家庭底部中间
    }，函数（）{
        的console.log（JSON.stringify（middleMainContent））;
        $ scope.middle_snippet = middleMainContent.response.content.snippet;
        $ scope.myBinding ='VERY NICE约束力';    }）;
 

所以，真的是我的预期的结果将是HTML：

为什么HERRRRO！ VERY NICE约束力

不过，我得到的花括号原始的HTML。任何想法将有助于为我是一个独立还在这里试图让这个工作。

---

更新：所以念叨编译服务，并使用它们的指示，由Chandermani提到后，我既开明和困惑。使用$编译时根据AngularJS队的最佳实践的方式是一个指令定义对象（DDO）这里说的 http://docs.angularjs.org/api/ng/service/ $编译。好了，我创建了一个DDO，但是，我对什么进入编译困惑：为DDO方法。以下是我迄今为止：

  VAR Mymodule中= angular.module（'html_compile'）;myModule.directive（'html_compiler'，函数厂（注射剂）{
VAR directiveDefinitionObject = {
    优先权：0，
    模板：$ scope.snippet，
    更换：真实，
    transclude：假的，
    限制：'E'，
    适用范围：假的，
    编译：编译功能（tElement，tAttrs）{
        返回{
            pre：函数$ P $砰砰（范围，iElement，iAttrs控制器）{...}，
            岗位：功能postLink（范围，iElement，iAttrs控制器）{...}
        }
        // 要么
        //返回功能postLink（...）{...}
    }，
    // 要么
    //链接：{
    // pre：函数$ P $砰砰（范围，iElement，iAttrs控制器）{...}，
    //后：功能postLink（范围，iElement，iAttrs控制器）{...}
    //}
    // 要么
    //链接：功能postLink（...）{...}
    };
    返回directiveDefinitionObject;
}）;
 

解决方案

所以@Chandermani击中它的头部与 $编译服务，当然这是例如就在该页面中的链接评论的结尾，然而，这是一个有点混乱，因为有，列在同一页面上的指令定义对象内的编译的元素。所以我想这个编译元素决定如何以及何时要编译所创建的DDO中的指令，并在底部的例子涉及到 $ compileProvider 并创建一个指令了这一点。有充分的解释回答博客位于此处的您自己的$编译服务指令

I have a html snippet that comes from a mongo db retrieved by an angular service. This html snippet is then sanitized on my page using the ng-bind-html directive from ngSanitize. I am wondering how I can bind an expression inside the html snippet to the page, so that when I bind the html the binding expression is executing inside the snippet. For example, here is my div where my html snippet will be bound to:

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

                </div>

and here is the actual snippet that gets pull from service.

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

And heres my simple controller:

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

    });

So really my expected results would be the html:

WHY HERRRRO!!! VERY NICE BINDING

However I get the original html with the curly braces. Any ideas would help as I am at a stand still here trying to get this to work.

---

UPDATE: So after reading about the compile service and using them with directives, as mentioned by Chandermani, I am both enlightened and confused. The "best practice" way according to AngularJS team when using $compile is to use it within a Directive Definition Object(DDO) as stated here http://docs.angularjs.org/api/ng/service/$compile. Ok, so I created a DDO, however, I am confused by what goes into the compile: method for the DDO. Here is what I have so far:

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;
});

解决方案

So @Chandermani hit it on the head with the $compile service, and of course it was the example right at the end of that page linked in the comments, however, it was a little confusing since there is a "compile" element inside the Directive Definition Object as listed on the same page. So I guess this compile element determines how and when you want to compile the directive you are creating within the DDO, and the example at the bottom pertains to the $compileProvider and creates a directive off of that. Blog with fully explained answer is located here: Your very own $compile service directive

这篇关于您可以使用HTML里面绑定角前pression从服务中检索？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！