AngularJS: Filter für ngStyle

Question

Guten Tag für alle!

Ich habe ein Problem mit AngularJS zu verstehen. Kann ich meinen benutzerdefinierten Filter in der ngStyle-Direktive verwenden? Warum kann die Opazität des span-Tags nicht gleichzeitig geändert werden, wenn ich den Wert in der Eingabe ändere (aber den Wert im Markup ändere)? Wie kann ich dieses Verhalten realisieren, ohne den Controller-Bereich direkt zu benutzen?

Mein Rohcode: HTML:

<div ng-app="app"> 
    <div ng-controller="AppCtrl"> 
     <input type="number" ng-model="slider" max="10" min="1"> 
     <span ng-style="{'opacity': '{{slider | filter}}'}">TEXT</span> 
    </div> 
</div> 

JS:

(function() { 
    angular 
     .module('app', []) 
     .controller('AppCtrl', ['$scope', function ($scope) { 
      $scope.slider = 6; 
     }]) 
     .filter('filter', function() { 
      return function (input) { 
       return 0.1 * input; 
      }; 
     }); 
})(); 

Mein Code bei JSFiddle: http://jsfiddle.net/zkdkLac3/

Answer 1

die allgemeine Frage zu beantworten, ja, in der Regel können Sie einen Benutzer verwenden erstellt in allgemeinen Winkelausdrücken filter. Sie haben möglicherweise Probleme mit ng-attr aufgrund eines Parsing-Fehlers (wahrscheinlich ein Fehler im Angular Parser). Sie können immer noch Kriterien verwenden, in ng-attr mit

<span ng-style="{ 'opacity': (slider | opacity) }">TEXT</span> 

ng-attr obwohl die meisten von Vorteil ist, um Stil für die Bindung Objekte direkt

<span ng-style="sliderStyle">TEXT</span> 

Sie auch mit

<span style="opacity: {{slider|opacity}}">TEXT</span> 

mit dem unten direkt stylen können filter:

app.filter('opacity', function() { 
    return function (input) { 
     return 0.1 * input; 
    }; 
}); 

Working jsfiddle

Unabhängig davon, welche Lösung besser in erster Linie ist, hängt davon ab, wo Sie planen, die Dinge wieder zu verwenden. Filter sind über alle scope s verfügbar, aber diese Option ist möglicherweise nur für einen bestimmten Controller sinnvoll. Vergessen Sie nicht, dass die Wiederverwendung auch mit Anweisungen (die einen Controller haben können) erreicht werden kann.