AngularJS: apply filter for ngStyle

Question

Good day for everyone!

I have a problem with understanding AngularJS. Can I use my custom filter within ngStyle directive? Why it can't change opacity of span tag at the same time when I change value in input (but it change value in markup)? How I can realize this behaviour without direct using controller scope?

My raw code: 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;
            };
        });
})();

My code at JSFiddle: http://jsfiddle.net/zkdkLac3/

Answer 1

Answering the general question, yes, generally you can use an user created filter in generic angular expressions. You might be having issues with ng-attr due to a parsing error (probably a bug in the angular parser). You can still use filters in ng-attr with

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

ng-attr though is most beneficial for binding to style objects directly

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

you can also style directly by using

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

with the below filter:

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

Working jsfiddle

Whichever solution is better mainly depends on where you plan to re-use things. Filters are available across all scopes, but this one in particular might only make sense for a given controller. Don't forget that reuse can be accomplished with directives (which can have a controller) as well.