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

Tambahan

Jika anda hanya melakukan penukaran data, menggunakan penapis di sini sudah pasti pilihan yang tepat. Tetapi anda terlibat dalam pengikatan peristiwa dinamik seperti ng-click Pada masa ini, ia tidak sesuai untuk menggunakan penapis untuk mengendalikan keperluan ini. Penapis melakukan pemprosesan tambahan pada input kami, menyasarkan data tersebut. Tanggungjawabnya sangat jelas of Angular untuk mereka bentuk penapis.

OK, jika anda berkeras untuk menulisnya dalam penapis, maka kaedah httpLinkClick hanya boleh digantung pada $rootScope Tiada pilihan lain

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

Tetapi malangnya, ia tidak berguna, kerana trustAsHtml mengendalikan semua acara terikat.

Jelas sekali keperluan ini perlu dilaksanakan menggunakan arahan Anda perlu memahami bahawa setiap fungsi mempunyai senario penggunaannya sendiri.

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

            }
        }
    }
})

Penyimpangan

Jika teks datang daripada input pengguna, maka anda harus berhati-hati tentang serangan XSS Cuba gunakan teks berikut

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

Answer 2

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