如何在angular中修改注入依赖项的依赖项?

时间:2013-11-13 20:01:47

标签: javascript angularjs file-upload

我正在查看JQuery File上传的angular插件的源代码,我看到以下代码:

angular.module('blueimp.fileupload', [])
  // The fileUpload service provides configuration options
  // for the fileUpload directive and default handlers for
  // File Upload events:
  .provider('fileUpload', function () { ... })
  .controller('FileUploadController', [
        '$scope', '$element', '$attrs', '$window', 'fileUpload',
        function ($scope, $element, $attrs, $window, fileUpload) {

   ...
   // Observe option changes:
   $scope.$watch(
       $attrs.fileUpload,
       function (newOptions) {
           if (newOptions) {
               $element.fileupload('option', newOptions);
           }
       }
   );

所以我觉得这个模块似乎是为了让我能够更新fileupload小部件上的选项(这就是$ element.fileupload('option',...)所做的);但是,我不知道如何进入$ attrs.fileUpload。

我需要在控制器中执行异步调用后将选项更新为fileupload:

var accountEditor = angular.module('accountEditor', [ 'ngResource', 'blueimp.fileupload' ]);
accountEditor.controller('accountEditorCtrl', [
            '$scope',
            '$resource',
            'fileUpload',
            function($scope, $resource, fileUpload) {
             doAsyncThing(function() {
                 // update options...what goes here?
             });

我当前的解决方案是一个黑客攻击,它会混淆事件回调的选项(如How to change dynamically the upload (jquery-file-upload) url using $scope?中所述)。我认为这是一个黑客攻击,因为它需要用户交互来设置选项,并且还会导致在异步调用完成之前可能发生用户交互的竞争条件。

1 个答案:

答案 0 :(得分:0)

你有观看代码吗?

我想你需要更新控制器上的options属性。

e.g。

查看:

<div data-ng-controller="accountEditorCtrl">
    <form data-ng-controller="FileUploadController" data-file-upload="options">
    </options>
</div>

控制器:

var accountEditor = angular.module('accountEditor', [ 'ngResource', 'blueimp.fileupload' ]);
accountEditor.controller('accountEditorCtrl', [
        '$scope',
        '$resource',
        'fileUpload',
        function($scope, $resource, fileUpload) {

        $scope.options = {}; // Set options here

         doAsyncThing(function() {
             $scope.options = {}; // Update options
             // Note if this async method is not handled by angular you may need
             // to call $scope.$apply(); to notify angular of the changes to scope
         });