如何顯示已存儲在服務器懸浮窗中Angularjs

Question

我使用這個指令來渲染Dropzone.js頁文件：

angular.module('dropzone', []).directive('dropzone', function() { 
    return function (scope, element, attrs) { 
    var config, dropzone; 

    config = scope[attrs.dropzone]; 

    // create a Dropzone for the element with the given options 
    dropzone = new Dropzone(element[0], config.options); 

    // bind the given event handlers 
    angular.forEach(config.eventHandlers, function (handler, event) { 
     dropzone.on(event, handler); 
    }); 
    }; 
}); 

，並在我的控制器使用此代碼：

angular.module('app', ['dropzone']); 

angular.module('app').controller('SomeCtrl', function ($scope) { 
    $scope.dropzoneConfig = { 
    'options': { // passed into the Dropzone constructor 
     'url': 'upload.php' 
    }, 
    'eventHandlers': { 
     'sending': function (file, xhr, formData) { 
     }, 
     'success': function (file, response) { 
     } 
    } 
    }; 
}); 

在懸浮窗來顯示已存儲在服務器上的文件使用mockFile和this.emit。現在如何獲得this並運行emit函數？

Answer 1

我解決了問題，這樣的：

'use strict'; 

angular.module('dropzone', []).directive('dropzone', function ($timeout) { 
    return { 
     restrict:'AE', 
     require: 'ngModel', 
     link:function (scope, element, attrs, ngModel) { 
      var init = function() { 
       var config, dropzone; 

       config = scope[attrs.dropzone]; 

       // create a Dropzone for the element with the given options 
       dropzone = new Dropzone(element[0], config.options); 


       // Display existing files on server 
       if(ngModel.$viewValue !=='' && ngModel.$viewValue !==undefined){ 
        var mockFile = {name: ngModel.$viewValue, size: 1234}; 
        dropzone.emit("addedfile", mockFile); 
        dropzone.createThumbnailFromUrl(mockFile, "uploads/" + ngModel.$viewValue); 
        dropzone.emit("complete", mockFile); 
       } 

       // Form submit rest dropzone event handler 
       scope.$on('dropzone.removeallfile', function() { 
        dropzone.removeAllFiles(); 
       }); 


       // bind the given event handlers 
       angular.forEach(config.eventHandlers, function (handler, event) { 
        dropzone.on(event, handler); 
       }); 
      }; 
      $timeout(init, 0); 
     } 
    } 
}); 

和控制器：

$scope.dropzoneConfig = { 
     options: { // passed into the Dropzone constructor 
      url: '/api/uploadimage', 
      paramName: "file", // The name that will be used to transfer the file 
      maxFilesize: .5, // MB 
      acceptedFiles: 'image/jpeg,image/png,image/gif', 
      maxFiles: 1, 
     }, 
     'eventHandlers': { 
      'removedfile': function (file,response) { 
       $http({ 
        method : "POST", 
        url : "/api/uploadimage/"+$scope.customer.avatar_url 
       }).then(function mySucces(response) { 
        $scope.deleteMessage = response.data; 
        $scope.customer.avatar_url=''; 
       }); 
      }, 
      'success': function (file, response) { 
       $scope.customer.avatar_url = response.filename; 
      } 
     } 
    }; 

，並在你的HTML：

<div ng-if="customer.avatar_url!==undefined" ng-model="customer.avatar_url" dropzone="dropzoneConfig" class="dropzone"></div>