2016-12-29 15 views
0

検索機能が実装されている場合は、検索対象の文字をハイライト表示するテキストで検索機能を実装しようとしています。しかし、私は特定の文字(<)が表示されないいくつかの奇妙なケースに遭遇しました。ng-bind-html非公開タグを表示

私は私のテンプレートで

<span ng-bind-html="action.text | highlight: search.criteria.text:(!search.excludeScenesAndActions && search.active)"></span> 

そして、ここでは私のフィルタです:私のテキストは、例えばであれば、私が午前

filters.filter('highlight', function() { 
    return function (text, search, enabled, caseSensitive) { 
     if (typeof (enabled) === 'undefined') 
      enabled = true; 

     if (enabled && text && (search || angular.isNumber(search))) { 
      text = text.toString(); 
      search = search.toString(); 

      if (caseSensitive) { 
       return text.split(search).join('<span class="search-match">' + search + '</span>'); 
      } else { 
       return text.replace(new RegExp('(' + search + ')', 'gi'), '<span class="search-match">$&</span>'); 
      } 
     } else { 
      return text; 
     } 
     }; 
    } 
); 

問題は、テンプレートにng-bind-htmlである<foo>bar <foo<foo><fooというタグをレンダリングしようとしているため、barと表示されます。私は、私が実際に

答えて

0

あなたindex.htmlangular-sanitize.min.jsファイルをインクルードし、あなたがangular.module('appName', ['ngSanitize'])あるモジュールを作成しているアプリケーションの依存関係を追加するされ<span>をレンダリングしたい私たちに素晴らしい作品しかしng-bindを試してみました。それだけです、うまくいくでしょう。戻り値が正しいことを確認してください。

関連する問題