更改$ compile对象的html在Angular中失败

Question

Angular 1.5: I have an ng-repeat which renders html that has ng-clicks in the text. Works fine.

Here's my compile directive:

app.controller('PageCtrl', pageController)
    .directive('compile', [
        '$compile', function($compile) {
            return function(scope, element, attrs) {
                scope.$watch(
                    function(scope) {
                        return scope.$eval(attrs.compile);
                    },
                    function(value) {
                        element.html(value);
                        $compile(element.contents())(scope);
                    }
                );
            };
        }
    ]);

Here's my html-bind with the compile directive

<div  class="mt10" ng-repeat="row in aqdas.Notes  | filter: filterNotes">
    <span class="pull-left text-bold mr5">{{row.Number}}. </span>
      <div compile ng-bind-html="TrustDangerousSnippet(row.Text,'note')">
           {{row.Text}}    
    </div>
</div>

Here's my TrustDangerousSnippet (simplified)

    $scope.TrustDangerousSnippet = function(text, kind) {
        var simpletext = new RegExp("(" + $scope.search + ")", "gi");
        text = text.replace(simpletext, "<mark>$1</mark>");

        var val = $sce.trustAsHtml(text);
        return val;
    };

Problem: In the TrustDangerousSnippet I use a reg ex to highlight an area of the text. When I do, the compile doesn't work. It seems when I change the text being bound, the $compile doesn't like it/allow it?

How can I either make the $compile like it, or some other way highlight the text?

Answer 1

Maybe this?

<div compile="TrustDangerousSnippet(row.Text, 'note')"></div>

Directive expects parameter. Try like this and remove watch (do one time compile), you may have digest problem.

app.controller('PageCtrl', pageController)
.directive('compile', [
    '$compile', function($compile) {
        return function(scope, element, attrs) {
            var html = scope.$eval(attrs.compile);
            element.append($compile(html)(scope));
        };
    }
]);