Question

我正在关注Angular和Electron的简单教程。我的问题是角度部分。我正在尝试在范围输入操作上应用图像过滤器，但过滤器似乎并不适用。如果我尝试另一种风格（让我们说imageReference.style.width = "50px"）它可以正常工作。这是我的控制者：

app.controller('editCtrl', function($scope, image) {
    $scope.imagePath = image.getImagePath();
    $scope.controlsActive = false;

    let imageReference = document.getElementById('mainImage');
    let generatedStyles = "";

    $scope.effects = {
        'Brightness': {val: 100, min: 0, max: 200, delim: '%'},
        'Contrast': {val: 100, min: 0, max: 200, delim: '%'},
        'Invert': {val: 0, min: 0, max: 100, delim: '%'},
        'Hup-Rotate': {val: 100, min: 0, max: 360, delim: 'deg'},
        'Sepia': {val: 0, min: 0, max: 100, delim: '%'},
        'Grayscale': {val: 0, min: 0, max: 100, delim: '%'},
        'Saturate': {val: 100, min: 0, max: 200, delim: '%'},
        'Blur': {val: 0, min: 0, max: 5, delim: 'px'}
    }

    $scope.imageEffect = (effectName) => {
        $scope.controlsActive = true;
        $scope.activeEffect = effectName;   
    }

    $scope.setEffect = () => {
        generatedStyles = "";
        for(let i in $scope.effects){ // i = Brightness and $scope.effects[i].val
             generatedStyles += `${i}(${$scope.effects[i].val + $scope.effects[i].delim})`
        }
        imageReference.style.filter = generatedStyles;
        //Electron Tutorial 16: Crazy Images Part 7 - Adding Image Effects
    }

});

我的HTML：

<div id="imageEditor">
    <div id="preview">
        <img src="{{imagePath}}" id="mainImage">
    </div>
    <div id="imageControls" ng-show="!controlsActive">
        <div class="effectType" ng-repeat="(effect, props) in effects" ng-click="imageEffect(effect)">
            {{effect}}
        </div>
    </div>
    <div id="liveEffects" ng-show="controlsActive">
        <div class="effect" ng-repeat="(effect, props) in effects" ng-show="effect == activeEffect">
            <div class="effectName">{{effect}}</div>
            <div class="amountDone">{{props.val + props.delim}}</div>
            <div class="range-slider">
                <input type="range" class="slider-input" min="{{props.min}}" max="{{props.max}}" ng-value="props.val" ng-model="props.val" ng-change="setEffect()">
            </div>
        </div>
    </div>
</div>

最后，这是我正在学习的视频： tutorial 如果重要的话，角度版本是1.6.9。

Answer 1

如果您想使用ng-style，可以将其用作对象。

$scope.currentEffects = {"filter": generatedStyles}

接下来就是for循环生成一个没有分隔的字符串，有点像这样： “亮度（100％）对比度（100％）”

我不熟悉过滤器属性，但我认为它们需要用空格分隔。

AngularJS style.filter不适用于DOM元素

1 个答案: