angular.js - angularjs compile problem

Question

Because my ng-bind-html uses ng-click, I need to use compile, but the documents I read all write compile in the directive. The problem is that I use compile in the filter. How to use it? There are no resources on the Internet. Not found. {code...} HTML: &lt;span ng-bind...

PHPz · Answer

~~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 = "" + textSubstring + "";
            inputText = inputText.replace(textSubstring, replaceTextHttp);
        }

        return $sce.trustAsHtml($compile('' + inputText + '')($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 = "" + textSubstring + "";
                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';

过去多啦不再A梦 · Answer

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