在指令中更新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();
                });
            });

        }
    };
})