Question

每个人都过得愉快！

我对理解AngularJS有疑问。我可以在ngStyle指令中使用我的自定义过滤器吗？当我在输入中更改值（但它在标记中更改值）时，为什么它不能同时更改span标记的不透明度？如何在不直接使用控制器范围的情况下实现此行为？

我的原始代码： 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;
            };
        });
})();

我在JSFiddle的代码：http://jsfiddle.net/zkdkLac3/

Answer 1

回答一般性问题，是的，通常您可以在通用角度表达式中使用用户创建的filter。由于解析错误（可能是角度解析器中的错误），您可能会遇到ng-attr的问题。您仍然可以在ng-attr中使用过滤器

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

ng-attr虽然最有利于直接绑定到样式对象

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

您也可以使用

直接设置样式

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

以下filter：

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

Working jsfiddle

无论哪种解决方案更好，主要取决于您计划重新使用的位置。过滤器可用于所有scope，但特别是这个过滤器可能仅适用于给定的控制器。不要忘记可以使用指令（也可以有控制器）来完成重用。

AngularJS：为ngStyle应用过滤器

1 个答案: