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

Supplément

Si vous effectuez simplement une conversion de données, utiliser le filtre ici est sans aucun doute le bon choix. Mais vous êtes impliqué dans une liaison d'événement dynamique comme ng-click Pour le moment, il n'est pas approprié d'utiliser un filtre pour gérer cette exigence. Le filtre effectue un traitement supplémentaire sur notre entrée, ciblant les données. Notez qu'il cible les données. Si vous utilisez le filtre pour traiter la logique de rendu, cela viole le principe de responsabilité unique. de la conception angulaire du filtre.

OK, si vous insistez pour l'écrire dans le filtre, alors la méthode httpLinkClick ne peut être accrochée que sur $rootScope, il n'y a pas d'autre choix, HACK une implémentation

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

Mais malheureusement, cela ne sert à rien, car trustAsHtml gère tous les événements liés.

Évidemment, ce besoin doit être implémenté à l'aide d'instructions. Vous devez comprendre que chaque fonction a son propre scénario d'utilisation.

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 () {

            }
        }
    }
})

Digression

Si le texte provient d'une saisie utilisateur, vous devez faire attention aux attaques XSS. Essayez d'utiliser le texte suivant

.

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

Answer 2

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