Question

我正在尝试创建自定义过滤器，但是尽管遵循了正确的结构，我认为有些错误。

angular.module('App', [])

.filter("htmlToPlaintext", function() {
	return function(text) {
	    return String(text).replace(/<[^>]+>/gm, '');
	}
})

.controller ('mainCtrl',['$scope','$filter', function($scope,$filter){
    $scope.items=[
        {id: '1', title: '<b>Chicago</b>'},
        {id: '2', title: '<b><i>New York</i></b>'},
        {id: '3', title: '<div><p>Washington</p></div>'}
    ];    
};

<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<div ng-app="App">
	<div ng-controller="mainCtrl">
		<div ng-repeat="item in items">
			{{item.title | htmlToPlainText}}
		</div>
	</div>
</div>

Answer 1

理想情况下，您应该在其自己的模块中声明您的过滤器，然后将其注入App模块。但您可以直接将过滤器附加到App模块。以下是一个工作示例：

    angular.module('App', [])
    .filter("htmlToPlaintext", function() {
        return function(input) {
          return input.replace(/<[^>]+>/gm, '');
        }
      })
      .controller('mainCtrl', ['$scope',
        function($scope) {
          $scope.items = [{
            id: '1',
            title: '<b>Chicago</b>'
          }, {
            id: '2',
            title: '<b><i>New York</i></b>'
          }, {
            id: '3',
            title: '<div><p>Washington</p></div>'
          }];
        }
      ]);

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <div ng-app="App">
      <div ng-controller="mainCtrl">
        <div ng-repeat="item in items">
          {{item.title | htmlToPlaintext}}
        </div>
      </div>
    </div>

您在使用HTML模板绑定时不需要使用$filter。

Answer 2

通过Regexps从HTML中提取文本不是一个好主意。特别是如果你遇到一些奇怪的东西，比如这个html

<span>2 < 3<span>

您的过滤器会为您提供2，但实际上此处应为2 < 3。如果您想正确管理所有可能的案例，您应该使用一些DOM-API：

.filter("htmlToPlaintext", function() {
    return function(text) {
        var div = document.createElement("div");
        div.innerHTML = html;
        return div.textContent || "";
    }
})

请查看this answer了解类似问题以了解详情。

“htmlToPlaintext”AngularJS（1.3.15）自定义过滤器

2 个答案: