Question

所以我试图使用带有AngularJS指令的精细上传器，但不依赖于jQuery。我正在尝试减少我的移动网络应用程序的占用空间，所以我希望消除jQuery依赖。有没有其他方法来初始化指令中给定/注入元素的fineUploader模块？

我有一个nodeJS后端，它与s3 sdk接口。

function bindToRenderedTemplate($compile, $scope, element) {
    $compile(element.contents())($scope);

}

angular.module("myApp")
    .directive("fineUploaderS3", function() {
        return {
            restrict: "ECMA",
            controller: 'FaceCardEditCtrl',
            replace: true,
            link: function($scope, element, $compile) {

                $scope.uploader = new qq.s3.FineUploader({
                    element: element[0],
                    request: {
                        // REQUIRED: We are using a custom domain
                        // for our S3 bucket, in this case.  You can
                        // use any valid URL that poidddnts to your bucket.
                        endpoint: "my.s3.endpoint",

                        // REQUIRED: The AWS public key for the client-side user
                        // we provisioned.
                        accessKey: "MYACCESSKEY"
                    },
                    objectProperties: {
                        acl: "my-acl-property"
                    },
                    template: "qq-template-bootstrap",

                    signature: {
                        endpoint: "/s3handler"

                    },
                    scaling: {
                        sendOriginal: false,
                        sizes: [
                            {name: "small", maxSize: 200}
                        ]
                    },

                    uploadSuccess: {
                        endpoint: "/s3/uploadSuccessful"
                    },

                    // USUALLY REQUIRED: Blank file on the same domain
                    // as this page, for IE9 and older support.
                    iframeSupport: {
                        localBlankPagePath: "success.html"
                    },
                    validation: {
                        allowedExtensions: ["gif", "jpeg", "jpg", "png"],
                        acceptFiles: "image/gif, image/jpeg, image/png",
                        itemLimit: 1,
                        sizeLimit: 1000000
                    },

                    thumbnails: {
                        placeholders: {
                            notAvailablePath: "assets/placeholders/not_available-generic.png",
                            waitingPath: "assets/placeholders/waiting-generic.png"
                        }
                    }
                });

                bindToRenderedTemplate($compile, $scope, element);

            }
        }
    });

页面加载时出现的错误是：

TypeError: object is not a function
    at bindToRenderedTemplate (http://localhost:9000/scripts/directives/fineUploaderDirective.js:4:5)
    at link (http://localhost:9000/scripts/directives/fineUploaderDirective.js:70:17)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6579:13)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:5986:15)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:5989:13)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:5989:13)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6573:24)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:5986:15)
    at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:5891:30)
    at http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:2805:9 <div class="uploader" fine-uploader-s3="" ng-click="uploadImage()">

这发生在行中： $编译（element.contents（））（$范围）; 在 bindToRenderedTemplate 函数

中

function bindToRenderedTemplate($compile, $scope, element) {
    $compile(element.contents())($scope);
}

有人能看到这个实现有什么问题吗？

Answer 1

问题在于你试图在错误的地方注入 $ compile ：

            link: function($scope, element, $compile) {

这样，$ compile变量中的东西实际上是一个持有元素属性的对象。有关详情，请参阅<{3>}，创建操纵DOM的指令部分

更正的版本将是这样的：

angular.module("myApp")
.directive("fineUploaderS3", function($compile) {
    return {
        ...
        link: function($scope, element) {
            ...
            bindToRenderedTemplate($compile, $scope, element);
        }
    }
});

请注意，$ compile变量已从第5行中的函数移动到第2行中的函数。

Answer 2

嗨Irukavina感谢提示

我实际上设法解决了这个问题。在我的指令中，我指定了'element'而没有'$'前缀。当我把这一切都包括在内时，所有事情都按预期工作了:)但是你的提示也让我朝着正确的方向发展。

修改后的代码：

angular.module("myApp")
    .directive("fineUploaderS3", function($compile) {
        return {
            restrict: "ECMA",
            controller: 'FaceCardEditCtrl',
            replace: true,
            link: function($scope, $element) {


            }
        }
    });

角度指令中的Fineuploader没有jQuery

2 个答案: