AngularJS 中的多个自定义过滤器答案

【问题标题】：Multiple custom filters in AngularJSAngularJS 中的多个自定义过滤器
【发布时间】：2023-04-03 22:23:01
【问题描述】：

我想在一个数据上放置 2 个海关过滤器。每个过滤器都可以完美地独立工作，但是当我将 2 放在相同的数据上时，我会收到一条错误消息（TypeError: input.replace is not a function），但如果我对此发表评论，我会收到另一条错误消息（错误：[ $sce:itype] 尝试在需要字符串的内容中信任非字符串值：上下文：html)

2 个自定义过滤器是不带参数的 goBold 和以字符串的最大长度作为参数的 limitHellip。

非常感谢，代码如下：

angular.module('appFilters', []).
	filter('goBold', function($sce) {
		return  function (input) {
			input = input.replace(' filter ',' <strong>WORD FILTERED</strong> ');
			return $sce.trustAsHtml( input );
		}
	}).
	filter('limitHellip', function($sce) {
		return  function (input, limit) {
			console.log(limit);
			if( input.length > 100 ) {
				input = input.substring(0,100);
				var index = input.lastIndexOf(" ");
				input = input.substring(0,index) + "&hellip;";
			}
			return $sce.trustAsHtml( input );
		}
	});

<ion-content class="has-subheader">
  <ion-item class="element item item-divider" data-ng-repeat="item in blocInfos" >
    <a href="#/list/{{ item.url }}">
      <img data-ng-src="img/{{ item.imageUrl }}" alt="">
      <h2 class="title">{{ item.title }}</h2>
    </a>
    <p data-ng-bind-html="item.text | limitHellip: 100 | goBold" class="wrap"></p>
  </ion-item>
</ion-content>

【问题讨论】：

标签： javascript angularjs filter

【解决方案1】：

这是因为你的第一个过滤器返回一个$sce.trusAsHtml()，它是一个Object，而不是一个字符串，所以你不能调用replace()方法。

所以，你必须把它改成String

Plunkr

过滤器

angular.module('appFilters', []).
filter('goBold', function($sce) {
    return  function (input) {

      input = input.toString(); //This line was added

        input = input.replace(' filter ',' <strong>WORD FILTERED</strong> ');
        return $sce.trustAsHtml( input );
    }
}).
filter('limitHellip', function($sce) {
    return  function (input, limit) {
        input = input.toString();      //Maybe you have to add it here too
        console.log(limit);
        if( input.length > limit ) {
            input = input.substring(0,limit);
            var index = input.lastIndexOf(" ");
            input = input.substring(0,index) + "&hellip;";
        }
        return $sce.trustAsHtml( input );
    }
})

【讨论】：