注入HTML过滤器- angularJS

Question

我试图建立一个角应用程序，我显示的国家列表。在我的数据库中，列出的国家没有文章(即。用"US"代替"the US")

无论如何我都想在段落中显示它们所以我创建了一个过滤器来纠正这个问题:

startupjobsApp.filter('countryFilter', function() {
  return function(input) {
    switch(input)
    {
    case 'United Kingdom':
        return 'the ' + input;
    case 'United States':
        return 'the ' + input;
    default:
        return input;
    }
  };
});

我用下面的代码显示它们:

<span class="content">
         <p>bla bla bla bla in <span>{{job.country | countryFilter}}</span></p>
</span>

我这里的问题是我的span有不同的字体颜色与段落的其余部分。我想在过滤器中注入<span>(返回' <span> ' +输入+ </span>;)，但HTML没有编译。

我该怎么做?

谢谢

Answer 1

如果你想在过滤器中注入HTML，你可以:

我相信你需要下载angular-sanitize。(http://docs.angularjs.org/api/ngSanitize/service/$sanitize and http://code.angularjs.org/1.2.9/)

<span class="content">
     <p>bla bla bla bla in <span ng-bind-html="job.country | countryFilter"></span></p>
</span>
startupjobsApp.filter('countryFilter', function() {
  return function(input) {
    switch(input)
    {
    case 'United Kingdom':
        return '<span>the ' + input +'</span>';
    case 'United States':
        return '<span>the ' + input  +'</span>';
    default:
        return input;
    }
  };
});