Can you use Angular Binding Expression inside HTML retrieved from Service?

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/22330939/can-you-use-angular-binding-expression-inside-html-retrieved-from-service

标签

javascript

angularjs

html-sanitizing