2016-10-04 2 views
0

span 요소를 동적으로 추가하는 각도 필터를 적용하여 검색된 단어를 강조 표시하려고합니다. 나는 $sce와 HTML을 신뢰하고하지만, 난 여전히 오류가 점점 오전 : Error: [$sce:unsafe] http://errors.angularjs.org/1.4.7/$sce/unsafe

이 내가 (간체) 한 것입니다 :

html 요소 :

<span ng-bind-html="entity.desc | filter:highlight(search)"></span> 

지침 :

scopePicker = ($sce) -> 

    return { 
     restrict: 'E' 
     scope: { 
      ... 
     } 
     templateUrl: 'my.html' 
     link: (scope, element, attributes, controller) -> 

      scope.highlight = (string) -> (desc) -> 
       return trustAsHtml(desc) unless string 
       return trustAsHtml(desc.replace(string, '<span class="highlighted">' + string + '</span>')) 

      return 
    } 

angular 
    .module('scopePicker') 
    .directive('sScopePicker', ['$sce', scopePicker]) 

답변

0

문제는 범위 내에서 필터 함수를 사용하려고했기 때문입니다. 지시어와 함께 모듈 수준에 추가해야합니다.

내가 무슨 짓을 :

highlightFilter = ($sce) -> (desc, string) -> 
    return $sce.trustAsHtml(desc) unless string 
    return $sce.trustAsHtml(desc.replace(string, '<span class="highlighted">' + string + '</span>')) 

app = angular.module('scopePicker') 
app.directive('sScopePicker', ['scopePickerService', '$q', scopePicker]) 
app.filter('highlight', ['$sce', highlightFilter])