angularjs - Angularjs：Cloudinary 上传小部件中的预填充搜索字段

问题描述

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

到目前为止一切正常，但我想添加一个额外的功能：上传小部件的“谷歌搜索”选项卡中的搜索字段应该预先填写（基于用户在页面上选择的内容）。

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

我已经尝试使用 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();
            });
        }
    }
}])

标签： angularjscloudinary

angularjs - Angularjs：Cloudinary 上传小部件中的预填充搜索字段

问题描述

解决方案

推荐阅读