更新指令中的 ng-repeat对象属性

Question

我有一个清单，其中包含来自 JSON 的多个问题：

 <div class="tab-pane fade in active" id="tab1">
    <div class="row">
       <div class="col-sm-12">
          <h3>{{list.titel}}</h3>
          <table class="table table-striped table-responsive">
            <tr ng-repeat="question in list.questions">
                <td>{{question.label}}</td>
                <td ng-if="question.checkboxes.length > 0">
                    <div class="form-check" ng-repeat="checkbox in question.checkboxes">
                        <input type="checkbox" class="form-check-input" ng-model="checkbox.value">
                            <label class="form-check-label">{{checkbox.text}}</label>
                    </div>
                </td>
                <td ng-if="question.checkboxes.length < 1">
                    <input type="text" ng-model="question.value" class="form-control">
                </td>
            </tr>
          </table>
         </div>
      </div>
     </div>

现在我的一些问题是上传图像的可能性：

<div>
    <input type="text" ng-model="question.remark" class="form-control"> <br>
    <input type="file" ng-model="question.image" class="form-control" my-directive>
</div>

这是我的指令和工厂：

.directive('dataMyDirective', function (httpPostFactory) {
        return {
            restrict: 'A',
            scope: true,
            link: function (scope, element, attr) {
                element.bind('change', function () {
                    var formData = new FormData();
                    formData.append('file', element[0].files[0]);
                    httpPostFactory('php/saveUpload.php', formData, function (callback) {
                       // recieve image name to use in a ng-src 
                        console.log(callback);
                    });
                });
            }
        };
    })
    .factory('httpPostFactory', function ($http) {
        return function (file, data, callback) {
            $http({
                url: file,
                method: "POST",
                data: data,
                headers: {'Content-Type': undefined}
            }).then(function (response) {
                callback(response);
            });
        };
    });

该指令返回我的图像的路径。我想将图像存储在问题列表的 JSON 结构中。但是我怎么知道这个图像是在哪个问题中设置的呢？有没有办法存储位置，例如：list.question[4].imagepath？

Answer 1

这应该适合您。将模型解析为指令，并设置新的对象属性。

视图

<input type="file" 
       ng-model="question.image" 
       base-model="question" 
       class="form-control" 
       my-directive>

AngularJS 指令

.directive('dataMyDirective', function (httpPostFactory) {
    return {
        restrict: 'A',
        scope: {
            baseModel: '='
        },
        link: function (scope, element, attr) {
            element.bind('change', function () {
                var formData = new FormData();
                formData.append('file', element[0].files[0]);
                httpPostFactory('php/saveUpload.php', formData, function (callback) {
                    // recieve image name to use in a ng-src
                    console.log(callback);
                    scope.baseModel.fileName = callback.whatEverFileNameIs;
                    scope.apply();
                });
            });
        }
    };
})