角度 jquery-fileupload 示例的打字稿版本？答案

【问题标题】：Typescript version of the angular jquery-fileupload example?角度 jquery-fileupload 示例的打字稿版本？
【发布时间】：2017-08-06 10:43:05
【问题描述】：

我正在尝试使用AngularJS 1.6.2 应用程序中的JQuery-FileUpload plugin，该应用程序还使用Typescript。我正在使用JQuery 1.12.4 来使用插件。

JQuery-FileUpload plugin 页面包含一个 Javascript AngularJS example app.js 和其中的 DemoFileUploadController sn-p，我无法找到如何使用 Typescript 使其工作：

.controller('DemoFileUploadController', [
    '$scope', '$http', '$filter', '$window',
    function ($scope, $http) {
        $scope.options = {
            url: url
        };
        if (!isOnGitHub) {
            $scope.loadingFiles = true;
            $http.get(url)
                .then(
                    function (response) {
                        $scope.loadingFiles = false;
                        $scope.queue = response.data.files || [];
                    },
                    function () {
                        $scope.loadingFiles = false;
                    }
                );
        }
    }
])

我的 Typescript 尝试是：

interface IUploadTSCtrlScope extends ng.IScope {
    options: any;
    queue: any;
    loadingFiles: boolean;

    // functions
    fileupload: any;
}

class UploadTSCtrl {
    constructor(private $scope:IUploadTSCtrlScope, private remoteServices: RemoteServices) {
        $scope.fileupload = function (url: string) {
            $scope.options = {
                url: url
            };
            $scope.loadingFiles = true;
            remoteServices.uploadFile(url)
                .then(
                    function (response: any) {
                        $scope.loadingFiles = false;
                        $scope.queue = response.data.files || [];
                    },
                    function () {
                        $scope.loadingFiles = false;
                    }
                );
        };
    }
}

但我总是在浏览器控制台中收到以下错误：

  TypeError: Object doesn't support property or method 'fileupload'
     at Anonymous function (http://localhost:9000/assets/js/jquery.fileupload-angular.js:282:17)
     at invoke (http://localhost:9000/assets/js/angular.js:4862:9)
     at $controllerInit (http://localhost:9000/assets/js/angular.js:10717:11)
     at nodeLinkFn (http://localhost:9000/assets/js/angular.js:9594:13)
     at compositeLinkFn (http://localhost:9000/assets/js/angular.js:8903:13)
     at compositeLinkFn (http://localhost:9000/assets/js/angular.js:8906:13)
     at compositeLinkFn (http://localhost:9000/assets/js/angular.js:8906:13)
     at publicLinkFn (http://localhost:9000/assets/js/angular.js:8768:30)
     at link (http://localhost:9000/assets/js/angular-route.js:1222:7)
     at Anonymous function (http://localhost:9000/assets/js/angular.js:1290:11) <div class="ng-scope" ng-view="">

【问题讨论】：

Mixing angular and jQuery is mostly a bad idea。甚至不要使用 jQuery。甚至不包括它。它会让你退缩。当你遇到一个你认为你已经知道如何在 jQuery 中解决的问题时，在你使用 $ 之前，试着考虑如何在 AngularJS 的范围内解决它。不知道就问吧！ 20 次中有 19 次，最好的方法不需要 jQuery，尝试用 jQuery 解决它会给你带来更多的工作。

标签： javascript jquery angularjs typescript jquery-file-upload

【解决方案1】：

这实际上不是由 Typescript 引起的，而是由于使用了 AngularJS 的更新版本，即 1.6.2，而 OP 问题在切换到 AngularJS 版本 1.3.15 时消失了。

【讨论】：