Question

Ctlr.js

app.controller('myCtrl', function($scope) {
    $scope.data = {
    waterMarkImgPosition: [
        {id: 'lowerRight', name: 'Lower Right'},
        {id: 'lowerLeft', name: 'Lower Left'},
        {id: 'upperRight', name: 'Upper Right'},
        {id: 'upperLeft', name: 'Upper left'},
        {id: 'center', name: 'Center'}
    ],
    selectedPosition: {id: 'upperRight', name: 'UpperRight'} //This sets the default value of the select in the ui
    };

    $scope.watermarkPosition = $scope.data.selectedPosition.id; //pass default position for watermark


});

Directive.js

app.directive('waterMark', function($timeout) {
    return {
        restrict: 'EA',
        link: function(scope,element,attrbs) {

                scope.videoSnapshotPath = 'img/watermark.png';
                scope.watermarkLogoPath = 'img/logo.jpg';

                //fetch position selected from dropdown
                scope.changePosition = function(imgposition) {

                    scope.watermarkPosition = imgposition.id;

                if(scope.watermarkPosition == 'lowerRight'){

                    $timeout(function() {
                    watermark([scope.videoSnapshotPath, scope.watermarkLogoPath])
                        .image(watermark.image.lowerRight(0.5))
                        .then(function (img) {
                            document.getElementById('lowerRight').appendChild(img);
                        })
                    }, 5);

                }else if(scope.watermarkPosition == 'upperRight'){

                    $timeout(function() {
                    watermark([scope.videoSnapshotPath, scope.watermarkLogoPath])
                        .image(watermark.image.upperRight(0.5))
                        .then(function (img) {
                            document.getElementById('upperRight').appendChild(img);
                        })
                    }, 5);

                }

                }
        }
    }
});

预览

<div class="col-lg-9" data-water-mark id="{{watermarkPosition}}"></div>

最初div将加载id='upperRight'选择为传递给控制器，水印将相应地设置其位置。现在，当用户选择upperLeft时，该位置将被传递并绑定到div，从而产生id='upperLeft'。

如何根据条件有条件地执行watermark功能用户选择的位置没有附加图像？
如果没有条件限制，我该如何动态传递position 在watermark.image.upperRight(0.5)和。{ 的document.getElementById（ 'upperRight'）的appendChild（IMG）。？

水印插件 - http://brianium.github.io/watermarkjs/images.html

AngularJS - 从Directive传递动态对象值和调用函数

0 个答案: