属性にフィルタを適用する方法は？

Question

問題を解決するのを手伝ってください。

テキストのカスタムフィルタを作成します。

<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：最初のケースのI出力にMYTEXTとフィルタを適用するには、結果が

HTML OKです、私は後者の場合のために、このフィルタを適用する必要がある

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.jsの同じバージョンを使用していることを確認してください、私はあなたのFIDDLE

を更新しました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> 

を使用するためにangular sanitizeが必要になりますangular.jsのこれは非常に重要です

Answer 2

コントローラからフィルタを適用する場合は、次

$filterサービスを注入し、あなたのコントローラにtransformFilterを注入し、それを直接使用することができます

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

または

を使用してそれを呼び出します。

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(); 
    } 
}]);