angular.js - angularjs compile问题
漂亮男人
漂亮男人 2017-05-15 17:01:34
0
2
513

因为我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链接修改为可点击。这里使用过滤器没问题吧!

漂亮男人
漂亮男人

Antworte allen(2)
PHPzhong

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

补充

如果只是单纯的进行数据转换,这里用filter无疑是正确的选择。但是你这里牵扯到了ng-click这种动态的事件绑定,这时候还想着用filter去处理这种需求是不适合的。filter是对我们的输入进行额外的处理,针对的是数据,注意了,是针对数据,职责很明确,如果你拿filter处理渲染的逻辑违反了单一职责原则,这并不是angular设计filter的初衷。

OK,如果你硬要写在filter里,那么httpLinkClick方法只能挂在到$rootScope上,没有别的选择,HACK一个实现

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

不过很可惜,没有用,因为trustAsHtml将绑定的事件都处理掉了。

很明显这种需求需要使用指令去实现,你要明白,每种功能都有自己的使用场景。

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

            }
        }
    }
})

题外话

如果text的来自用户输入,那么你要注意XSS攻击了,试着使用下面的text

$scope.text = 'http://www.baidu.com<script>alert(4)</script>';
过去多啦不再A梦

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage