Question

我正在将cloudinary上传小部件v2.0集成到我的角度应用程序中。为此，我创建了一个服务（调用一些后端Cloudinary调用）和一个指令（将上传小部件链接到特定按钮）。

到目前为止一切正常，但是我想添加一个附加功能：应该预先填充上载小部件的“ google搜索”标签中的搜索字段（根据用户在页面上选择的内容）。

我想知道如何在我的angular指令中轻松访问此搜索字段以更新值，而上传小部件不是使用angular制作的。

我已经尝试使用angular.element并根据某些类找到搜索字段，但这似乎行不通。

$scope.uploadWidgetSearchField = angular.element($document[0].querySelector(".text-field.search-input"));
$scope.uploadWidgetSearchField.val("TEST VALUE"); // Test 1
$scope.uploadWidgetSearchField.replaceWith("<h2>TEST</h2>"); // Test 2

服务

angular.module('cloudinaryModule', [
    'cloudinary',
    'gimmi.config'
])
    .provider('cloudinaryService', ['CONFIG', function(CONFIG){
    var _self = this;
    /** Set default options for Cloudinary upload widget.
     * All options can be found at: https://cloudinary.com/documentation/upload_widget#cloudinary_openuploadwidget_options_resultcallback
     */
    var widgetOptions = {
        sources: ['local', 'image_search', 'url'],
        defaultSource: 'image_search',
        resourceType: 'image',
        multiple: false,
        theme: "minimal",
        showPoweredBy: false, //Note: Supported only for paid Cloudinary accounts and requires some time for cache expiration.
        showAdvancedOptions: false,
        showCompletedButton: false
    };

    _self.setOption = function (key, value){
        widgetOptions[key] = value;
        return _self;
    }
    _self.$get = ['$http', function($http){
        var clsrv = {};

        /** Get a signature for a signed upload to Cloudinary */
        clsrv.getSignature = function (callback, params_to_sign) {
            $http.post(CONFIG.apiUrl + '/api/images/signature', params_to_sign)
                .then((results) => {
                    var signature = results.data;
                    callback(signature);
                });
        }

        /** 
         * Create a cloudinary upload widget 
         * @function createWidget
         * @param {String} publicId A dynamically chosen publicId
         * @param {function} callback A callback function with arguments error and results to handle events in the upload widget
         * @return {CloudinaryUploadWidget}
         * */
        clsrv.createWidget = function(publicId, callback) {
            if (publicId) {
                widgetOptions.publicId = publicId;
            }
            widgetOptions.uploadSignature = clsrv.getSignature;
            return cloudinary.createUploadWidget(widgetOptions, callback);
        }

        return clsrv;
    }];
}]);

指令

angular.module('cloudinaryModule')
    .directive('clUpload', ['cloudinaryService', function (cloudinaryService){
    return {
        restrict: 'AE',
        replace: false,
        scope: {
            searchTerm: '@',
            publicId: '@',
            imageResult: '=',
            onImageUpload: '&',
            onCancel: '&'
        },        
        link: function ($scope, $element, $attrs) {
            /** Create the upload widget on loading the directive */
            var widget = cloudinaryService.createWidget($scope.publicId, function (error, result) {
                if (result && result.event === "success") {
                    var uploadedImage = {
                        public_id: result.info.public_id,
                        version: result.info.version
                    };
                    if ($scope.imageResult) {
                        $scope.$apply(function() {
                            $scope.imageResult = uploadedImage;
                        });
                    }
                    if ($scope.onImageUpload) {
                        $scope.$apply($scope.onImageUpload(uploadedImage));
                    }
                    console.log("Uploaded image:", $scope.imageResult);
                    widget.close({ quiet: true });
                } else if (error) {
                    console.error(error);
                    if ($scope.onCancel) {
                        $scope.$apply($scope.onCancel(error));
                    }
                }
            });

            /** On click on element: open the widget */
            $element.on('click', function () {
                widget.open();
            });
        }
    }
}])

Answer 1

没有直接填充搜索字段的直接方法。这是用户需要直接填写的内容。

Angular.js：Cloudinary上传小部件中的预填充搜索字段

1 个答案: