AngularJS中如何将Uploadcare上传的图片URL绑定至另一输入框？

问题的核心在于Uploadcare的上传控件会替换原生的<input>元素，导致AngularJS的ng-model无法自动追踪其值变化——因为DOM结构被Uploadcare的组件覆盖了，原生的Angular数据绑定机制失效了。我们需要借助Uploadcare的JavaScript API来手动监听上传事件，再同步到Angular的作用域中。

步骤1：监听Uploadcare上传完成事件 #

在你的AngularJS控制器中，初始化Uploadcare Widget并监听upload-success事件，当图片上传完成后，获取CDN URL并更新作用域变量：

// 假设你的Angular模块和控制器是这样的
angular.module('yourApp', [])
.controller('ImageUploadController', function($scope) {
    // 初始化Uploadcare Widget，匹配你的上传控件选择器
    const uploadWidget = uploadcare.Widget('[role=uploadcare-uploader]');

    // 监听上传成功事件
    uploadWidget.on('upload-success', function(fileInfo) {
        // 用$scope.$apply包裹，确保Angular感知到变量变化
        $scope.$apply(() => {
            // 将上传后的图片URL存入$scope.img
            $scope.img = fileInfo.cdnUrl;
            // 直接同步到目标输入框的绑定变量
            $scope.userimg = fileInfo.cdnUrl;
        });
    });
});

步骤2：简化HTML绑定 #

去掉第二个输入框多余的ng-bind和value属性，只保留ng-model即可——Angular会自动同步作用域变量到视图：

<div ng-controller="ImageUploadController">
    <div>
        <label>Upload Img</label>
        <input role="uploadcare-uploader" name="content" data-public-key="240426036fd9daf2d723" data-images-only />
    </div>
    <div>
        <label for="quantity">Fetch above input value in this input</label>
        <input type="text" ng-model="userimg">
    </div>
</div>

关键说明 #

• 为什么用$scope.$apply？：Uploadcare的事件是在AngularJS的消化周期（digest cycle）外部触发的，Angular无法自动检测到变量变化，所以需要用$apply强制触发视图更新。
• 如果不需要分开变量：可以直接让两个输入框绑定同一个ng-model（比如都用ng-model="userimg"），这样上传成功后只需要更新一次变量即可。

内容的提问来源于stack exchange，提问作者R. Mani Selvam