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

Posted 2023-03-25

【中文标题】Angularjs：Cloudinary 上传小部件中的预填充搜索字段

【英文标题】：Angularjs: prefill search field in Cloudinary upload widget

【发布时间】：2019-04-14 10:03:10

【问题描述】：

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

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

我想知道如何从我的 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();
            );
        
    
])

【参考方案1】：

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

【讨论】：

好的，所以 Cloudinary 不支持这个功能。但我想应该可以使用 angular 或 jquery 吗？