angular.js - angularjs compile问题

Question

因为我ng-bind-html用到了ng-click，需要用compile，但是我看的文档都是在directive里面写compile，问题是我是在过滤器filter里面用compile，怎么用啊，网上一点资源都找不到。

app.filter('httpClickFilter',function($sce){
        return function(inputText){
            var textHttpArray = inputText.split('http');
            textHttpArray[textHttpArray.length-1] = textHttpArray[textHttpArray.length-1] + ' ';
            for(var i = 1;i < textHttpArray.length; i++){
                var textSubstring = 'http' + textHttpArray[i].substring(0,textHttpArray[i].indexOf(' '));
                var replaceTextHttp = "<span style='color:#fe7979' ng-click='httpLinkClick()'>"+textSubstring+"</span>";
                inputText = inputText.replace(textSubstring,replaceTextHttp);
            }
            return $sce.trustAsHtml(inputText);
        }
    })

HTML：<span ng-bind-html="item.text | httpClickFilter"></span>

大体的意思是：拦截一段text字段，查找里面的http链接，把HTTP链接修改为可点击。这里使用过滤器没问题吧！

Answer 1

http://stackoverflow.com/questions/19726179/how-to-make-ng-bind-html-compile-angularjs-code

Supplement

If you are just doing data conversion, using filter here is undoubtedly the right choice. But you are involved in this kind of dynamic event binding. At this time, it is not suitable to use filters to handle this demand. The filter performs additional processing on our input, targeting the data. Note that it targets the data. The responsibilities are very clear. If you use the filter to process the rendering logic, it violates the single responsibility principle. This is not the original intention of Angular's design of the filter. ng-click

OK, if you insist on writing it in the filter, then the

method can only be hung on $rootScope, there is no other choice, just HACK to implement ithttpLinkClick

app.filter('httpClickFilter', function ($sce, $compile, $rootScope) {
    $rootScope.httpLinkClick = function () {
        console.log(234);
    };

    return function (inputText) {
        var textHttpArray = inputText.split('http');
        textHttpArray[textHttpArray.length - 1] = textHttpArray[textHttpArray.length - 1] + ' ';
        for (var i = 1; i < textHttpArray.length; i++) {
            var textSubstring = 'http' + textHttpArray[i].substring(0, textHttpArray[i].indexOf(' '));
            var replaceTextHttp = "<span style='color:#fe7979' ng-click='httpLinkClick()'>" + textSubstring + "</span>";
            inputText = inputText.replace(textSubstring, replaceTextHttp);
        }

        return $sce.trustAsHtml($compile('<p>' + inputText + '</p>')($rootScope).html());
    }
});

But unfortunately, it is useless, because trustAsHtml handles all the bound events.

Obviously this need needs to be implemented using instructions. You have to understand that each function has its own usage scenario.

app.directive('httpClick', function ($compile) {
    return {
        restrict: 'A',
        scope: {
            contents: '=httpClick'
        },
        link: function (scope, element, attrs) {
            var inputText = scope.contents;
            var textHttpArray = inputText.split('http');
            textHttpArray[textHttpArray.length - 1] = textHttpArray[textHttpArray.length - 1] + ' ';
            for (var i = 1; i < textHttpArray.length; i++) {
                var textSubstring = 'http' + textHttpArray[i].substring(0, textHttpArray[i].indexOf(' '));
                var replaceTextHttp = "<span style='color:#fe7979' ng-click='httpLinkClick()'>" + textSubstring + "</span>";
                inputText = inputText.replace(textSubstring, replaceTextHttp);
            }

            element.html($compile(inputText)(scope));
        },
        controller: function ($scope) {
            $scope.httpLinkClick = function () {

            }
        }
    }
})

Off topic

If the text comes from user input, then you should pay attention to XSS attacks, try using the following text

$scope.text = 'http://www.baidu.com<script>alert(4)</script>';

Answer 2

http://stackoverflow.com/a/18149450/2586541