Question

我已经创建了一个dropzone js指令，要在我们需要包含依赖项的任何应用程序中使用它使用该指令时，我无法通过引用传递变量可能是什么问题呢？我不能将值传递给另一个依赖的应用程序吗？

将变量名称配置传递给指令不起作用 的 HTML：

<my-image-widget  my-selection="1" my-config="dropzoneConfig" my-name="trialname"></my-image-widget>

JS：

(function() {
    var app;

    app = angular.module('myWidget', ["ngCookies"]);

    app.directive("myImageWidget", ['$cookies','$http', function($cookies,$http) {
        return {
            restrict : "E",
            scope:{
                mySelection:"@",
                myName:'=',
                myConfig:'=',
            },
            template: "<form class='dropzone test' action='{{apiCall}}' id='{{mySelection}}'> {{myName}}</form>",
            controller : function($scope, $element, $attrs) {
                console.log($attrs.myConfig+' ----name is -----'+$attrs.myName);

                //var config;

                var config = $attrs.myConfig;
                console.log('Option is ---------->'+config.option);

                //var config=$scope.dropzoneConfig;

                var myDropzone = new Dropzone($element[0], config.options);
                myDropzone.autoDiscover = false;
                //Write function if you need to add some event after files added
                myDropzone.on("sending", function(file, xhr, formData) {
                    xhr.setRequestHeader('X-CSRFToken', $cookies.csrftoken);
                });

                myDropzone.on("addedfile", function(file) {  
                    var _this=this;

                    /* Maybe display some more file information on your page */
                    var removeButton = Dropzone.createElement("<button data-dz-remove>*Remove file</button>");
                    removeButton.addEventListener("click", function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        var server_file = $(file.previewTemplate).children('.server_file').text();
                        alert('server-file ----------->>'+server_file);
                        // Do a post request and pass this path and use server-side language to delete the file
                        //          $.post(server_file,{'X-CSRFToken': $cookies.csrftoken}, 'json');
                        $http({method: 'POSt', url: server_file, headers: {'X-CSRFToken': $cookies.csrftoken}});
                        _this.removeFile(file);
                    });
                    file.previewElement.appendChild(removeButton);
                });

                myDropzone.on("success", function(file, response) {
                    console.log('&&&&&&&&&&&&&&&&&&&&&&After Adding response is ---------->'+response);
                    obj = JSON.parse(response);
                    console.log('*********************thumbnail created for ---------->'+obj.delete_url);
                    var removeLinkUrl = Dropzone.createElement('<span class="server_file">'+obj.delete_url+'</span>');
                    file.previewElement.appendChild(removeLinkUrl);
                    myDropzone.emit("thumbnail", file,'https://www.google.co.in/logos/doodles/2014/world-cup-2014-12-5204175918989312-res.png');
                    debugger;
                    // console.log('success');
                });

                myDropzone.on("removedfile", function(file) {
                    console.log('Removed file ---------->'+file.name);
                    /* Maybe display some more file information on your page */
                });

                _.each(config.eventHandlers, function (handler, event) {
                    console.log('loop');
                    myDropzone.on(event, handler);
                });
            },
            replace : true,
            transclude : true,
            link : function(scope, element, attrs) {},
        };
    }]);
}).call(this);

Answer 1

我尝试使用$attrs.myConfig访问变量，而不是尝试$scope.attrs并解决了我的问题..

使用依赖项包含的指令传递变量

1 个答案: