Question

请帮助解决问题。

我为文字编写自定义过滤器。在第一种情况下，我输出myText并应用过滤器，结果是正确的

HTML：

<div ng-app="main4">
  <md-content ng-controller="main4Ctrl">
    <h2 class="md-display-1 ng-binding">Главная страница 3</h2>

    <sapn id="firstCase">{{myText | transform}}</sapn> - it worked
    <hr>
    <span id="secondCase" ng-bind-html="myText"/>      - but it not worked
  </md-content>
</div>

JS：

angular.module('main4', [])
.controller('main4Ctrl', ['$rootScope', '$scope', '$timeout',
  function($rootScope, $scope, $timeout) {
    $scope.myText = 'qWeRtYuIoP';
  }
]).filter('transform',[function(){
  return function(text){
    return transformTetx = text.toLowerCase();
  }
}]);

我需要为第二种情况应用此过滤器

JSFILLDE

Answer 1

您需要angular sanitize才能使用ng-bind-html

angular.module('main4', ['ngSanitize'])
.controller('main4Ctrl', ['$rootScope', '$scope', '$timeout',
  function($rootScope, $scope, $timeout) {
    $scope.myText = 'qWeRtYuIoP';
  }
]).filter('transform',[function(){
  return function(text){
    return transformTetx = text.toLowerCase();
  }
}]);

<span id="secondCase" ng-bind-html="myText | transform"></span>

我更新了您的FIDDLE

确保您使用与angular-sanitize.js相同版本的angular.js。这非常重要

Answer 2

如果要从控制器应用过滤器，可以执行以下操作：

注入$filter服务并使用

进行调用

var transformedData = $filter('transform')(dataToTransform);

或

您可以将transformFilter注入控制器并直接使用它。

var transformedData2 = transformFilter(dataToTransform);

Angular会自动识别transform是过滤器。

Answer 3

您应该在span元素上使用ng-bind。这是工作小提琴

 <div ng-app="main4">
   <md-content ng-controller="main4Ctrl">
   <span id="firstCase">{{myText | transform}}</span> - it worked
   <hr>
   <span id="secondCase" ng-bind="myText | transform"></span>     - but it not worked
</div>

var app = angular.module('main4', []);
app.controller('main4Ctrl', ['$rootScope', '$scope', '$timeout',
   function($rootScope, $scope, $timeout) {
     $scope.myText = 'qWeRtYuIoP';
   }
])
app.filter('transform',[function(){
    return function(text){
        return transformTetx = text.toLowerCase();
    }
}]);

如何为属性应用过滤器？

3 个答案: