Wie man einen Filter für ein Attribut anwendet?

Question

Bitte helfen Sie das Problem zu lösen.

Ich schreibe benutzerdefinierten Filter für Text. in ersten Fall i Ausgang myText und Filter anwenden, ist das Ergebnis OK

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

ich anwenden muß diese Filter für die zweiten Fall

JSFILLDE

Answer 1

Sie angular sanitize benötigen, um 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> 

Ich aktualisiert, um Ihre FIDDLE

Stellen Sie sicher, dass Sie die gleiche Version von angular-sanitize.js verwenden, wie der angular.js. Dies ist sehr wichtig

Answer 2

Wenn Sie Ihren Filter von Ihrem Controller anwenden möchten, können Sie tun die folgenden:

Injizieren Sie die $filter Service und nennen Sie es, indem Sie

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

oder

Sie können transformFilter in Ihrem Controller injizieren und es direkt verwenden.

var transformedData2 = transformFilter(dataToTransform); 

Angular erkennt automatisch, dass transform ein Filter ist.

Answer 3

Sie sollten stattdessen ng-bind für das span-Element verwenden. Hier ist die Arbeits Geige

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