AngularJS NG-文件上传不工作里面NG-重复

本文介绍了AngularJS NG-文件上传不工作里面NG-重复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有指令笔记，这基本上是一个Notes窗口小部件，我可以添加任何页面上，只是添加一个名称和ID它让人们添加注释到该项目。

用户应该能够使用将文件上传到自己的笔记

指令：

  angular.module（应用）。指令（注释，[功能（）{
    返回{
        限制：'E'，
        templateUrl：notes.html'，
        范围： {
            的itemId：'@'，
            itemModel：'@'
        }，
        控制器：['$范围'，'上传'，函数（$范围，上传）{
            $ scope.files = [];
            $ scope.notes = [
              {标题：第一个冠军}，
              {标题：第二个冠军'}
            ];            $范围。$腕表（'文件'，函数（文件）{
                的console.log（文件）;
                $ scope.formUpload = FALSE;
                如果（文件！= NULL）{
                    对于（VAR I = 0; I＆LT; files.length;我++）{
                        $ scope.errorMsg = NULL;
                        （函数（文件）{
                            uploadUsingUpload（文件）;
                        }）（文件[I]）;
                    }
                }
            }）;            功能uploadUsingUpload（文件）{
                file.upload = Upload.upload（{
                    网址：'/ API / V1 /笔记/ upload_attachment'，
                    方法：POST，
                    //头：{
                    //'我的头：我的头值
                    //}，
                    //字段：{用户名：$ scope.username}，
                    文件：文件，
                    fileFormDataName：'文件'
                }）;                file.upload.then（功能（响应）{
                    $超时（函数（）{
                        file.result = response.data;
                    }）;
                }，函数（响应）{
                    如果（response.status大于0）
                        $ scope.errorMsg = response.status +：+ response.data;
                }）;                file.upload.progress（功能（EVT）{
                    // Math.min是修复IE有时会报告200％
                    file.progress = Math.min（100，parseInt函数（100.0 * evt.loaded / evt.total））;
                }）;                file.upload.xhr（功能（XHR）{
                    // xhr.upload.addEventListener（'中止'，函数（）{的console.log（'中止完成'）}，FALSE）;
                }）;
            }        }]
    };
}]）;

模板：

 ＆LT; UL＆GT;
  ＆LT;李NG重复=音符笔记＆GT;
    {{note.title}}
    ＆LT; DIV NGF选NG模型=文件＆GT;＆LT; B＆GT;上传和LT; / B＆GT;＆LT; / DIV＆GT;
  ＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; pre风格=边界：1px的红色实;＆GT; {{文件| JSON}}＆LT; / pre＆GT;

解决方案

我是有点晚了这里，但你为什么有更新$ scope.files财产问题的原因是因为被中创建一个新的作用域您的NG-重复。

 ＆LT; UL＆GT;
    ＆LT;李NG重复=音符笔记＆GT;
        {{note.title}}
        ＆LT; DIV NGF选NG模型=$ parent.files＆GT;＆LT; B＆GT;上传和LT; / B＆GT;＆LT; / DIV＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; pre风格=边界：1px的红色实;＆GT; {{文件| JSON}}＆LT; / pre＆GT;

有关作用域的角度退房如何工作的更多信息，

I have directive "notes" which is basically a notes widget that I can add on any page and just add a name and id to it to allow people adding notes to that item.

The users should be able to upload files to their notes using ng-file-upload as well now but I struggle to get the $scope.files populated by the ng-file-upload directive. I'm pretty sure it is as usual something stupid with the scope but I can't figure it out.

So any idea why $scope.files gets not populated when I select a file?

Plunker Link

Directive:

angular.module('app').directive('notes', [function () {
    return {
        restrict: 'E',
        templateUrl: 'notes.html',
        scope: {
            itemId: '@',
            itemModel: '@'
        },
        controller: ['$scope', 'Upload', function($scope, Upload) {
            $scope.files = [];
            $scope.notes = [
              {title: 'first title'},
              {title: 'second title'}
            ];

            $scope.$watch('files', function (files) {
                console.log(files);
                $scope.formUpload = false;
                if (files != null) {
                    for (var i = 0; i < files.length; i++) {
                        $scope.errorMsg = null;
                        (function (file) {
                            uploadUsingUpload(file);
                        })(files[i]);
                    }
                }
            });

            function uploadUsingUpload(file) {
                file.upload = Upload.upload({
                    url: '/api/v1/notes/upload_attachment',
                    method: 'POST',
                    //headers: {
                    //  'my-header': 'my-header-value'
                    //},
                    //fields: {username: $scope.username},
                    file: file,
                    fileFormDataName: 'file'
                });

                file.upload.then(function (response) {
                    $timeout(function () {
                        file.result = response.data;
                    });
                }, function (response) {
                    if (response.status > 0)
                        $scope.errorMsg = response.status + ': ' + response.data;
                });

                file.upload.progress(function (evt) {
                    // Math.min is to fix IE which reports 200% sometimes
                    file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
                });

                file.upload.xhr(function (xhr) {
                    // xhr.upload.addEventListener('abort', function(){console.log('abort complete')}, false);
                });
            }

        }]
    };
}]);

Template:

<ul>
  <li ng-repeat="note in notes">
    {{note.title}}
    <div ngf-select ng-model="files"><b>upload</b></div>
  </li>
</ul>
<pre style="border: 1px solid red;">{{files | json}}</pre>

解决方案

I'm kind of late here but the reason why you're having a problem updating the $scope.files property is because a new scope is being created within your ng-repeat.

<ul>
    <li ng-repeat="note in notes">
        {{note.title}}
        <div ngf-select ng-model="$parent.files"><b>upload</b></div>
    </li>
</ul>
<pre style="border: 1px solid red;">{{files | json}}</pre>

For more information about how scoping works in angular check out https://github.com/angular/angular.js/wiki/Understanding-Scopes

这篇关于AngularJS NG-文件上传不工作里面NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！