javascript - Customized instructions in ng-bind-html do not take effect!

Question

Problem: Using ng-bind-html, the correct html code has been generated on the page, but the directive in the tag does not take effect!
js code:

html code:

Answer 1

Of course it will not take effect, ng-bind-html is equivalent to innerHTML.

You can customize a command similar to ng-bind-html-compile:

.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    // In case value is a TrustedValueHolderType, sometimes it
                    // needs to be explicitly called into a string in order to
                    // get the HTML string.
                    element.html(value && value.toString());
                    // If scope is provided use it, otherwise use parent scope
                    var compileScope = scope;
                    if (attrs.bindHtmlScope) {
                        compileScope = scope.$eval(attrs.bindHtmlScope);
                    }
                    $compile(element.contents())(compileScope);
                });
            }
        };
    }]);

<p ng-bind-html-compile="getId(xxx)"></p>