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

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

漂亮男人
漂亮男人

모든 응답(2)
PHPzhong

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

보충제

데이터 변환만 수행하는 경우 여기에서 필터를 사용하는 것이 의심할 여지 없이 올바른 선택입니다. 그러나 ng-click과 같은 동적 이벤트 바인딩에 관여하고 있으므로 현재 이 요구 사항을 처리하기 위해 필터를 사용하는 것은 적합하지 않습니다. 필터는 데이터를 대상으로 추가 처리를 수행합니다. 필터를 사용하여 렌더링 논리를 처리하는 경우 이는 원래 의도가 아닙니다. 필터를 디자인하기 위해 Angular를 사용합니다. ng-click这种动态的事件绑定,这时候还想着用filter去处理这种需求是不适合的。filter是对我们的输入进行额外的处理,针对的是数据,注意了,是针对数据,职责很明确,如果你拿filter处理渲染的逻辑违反了单一职责原则,这并不是angular设计filter的初衷。

OK,如果你硬要写在filter里,那么httpLinkClick

좋아요, 필터에 작성하라고 하면 httpLinkClick 메서드는 $rootScope에만 매달릴 수 있습니다. HACK을 구현하는 유일한 방법은 없습니다. 으아악

하지만 불행히도 trustAsHtml이 모든 바인딩된 이벤트를 처리하기 때문에 쓸모가 없습니다.

분명히 이러한 요구 사항은 지침을 사용하여 구현되어야 합니다. 각 기능에는 고유한 사용 시나리오가 있다는 점을 이해해야 합니다.

으아악

주제에서 벗어남

텍스트가 사용자 입력에서 나온 경우 XSS 공격에 주의해야 합니다. 다음 텍스트를 사용해 보세요

으아악
过去多啦不再A梦

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿