Question

我有一个指令，我正在尝试观察一个范围的成员，一个对象数组。

        <div ng-repeat="image in images track by $index" class="cr-form image-block-holder clearfix">
            <div ng-class="images[$index].imageFile == undefined ? 'image-upload' : 'image-upload image-active'">
                <div class="cr-file-upload" style="position: relative">
                    <input id="crChooseFile" type="file" ngf-select ng-model="images[$index].imageFile" ngf-multiple="false" ng-attr-accept="image/*" 
                           class="form-control ng-pristine ng-invalid ng-invalid-required ng-touched" name="uploadField" image="imageFile" />

                </div>
                <div class="cr-edit-business-profile">
                    <div class="cr-business-logo">
                        <img class="cr-profile-logo-img" ng-show="images[$index].imageFile" ng-src="{{images[$index].imageFile.url}}" type="{{images[$index].imageFile.file.type}}" />
                        <img ng-show="images[$index].imageFile == null && images[$index].logo" ng-src="{{images[$index].logo}}" type="image/png" />
                    </div>
                </div>
                <div class="image-label">
                    <label>Browse</label> <br />
                </div>
            </div>

            <div class="form-elements">
                <div class="input-inner">
                    <textarea type="text" ng-model="images[$index].caption" ng-keyup="setCaption($index)" placeholder="Add Caption"></textarea>
                </div>
            </div>
        </div>

这是我指令中的手表：

                scope.$watch(function () { return scope.images }, function (newValue, oldValue) {
                    if (newValue && oldValue) {
                        $timeout(function () {
                            var changedIndex = -1;
                            for (var i = 0; i < scope.content.noOfImages && changedIndex == -1; i++) {
                                if (isDifferentImage(newValue[i].imageFile, oldValue[i].imageFile))
                                    changedIndex = i;
                            }
                            if (changedIndex == -1)
                                return;
                            scope.content.images[changedIndex].photo = newValue[changedIndex].imageFile;

                        }, 0, false);
                    }
                }, true);

我也尝试过使用watchCollection，它没有被解雇，没有深度观察它也不会被解雇。 ng-change事件似乎没有成功;深度$ watch on objects数组返回非法调用。

知道如何使这项工作？我正在使用棱角1.4.5

Answer 1

这是因为您的images数组包含File个对象。

以下内容可在$watch文档中找到：

这不应该用于监视对象或对象的更改由于angular.copy的限制，包含File对象。

你必须以另一种方式解决它。

例如，观看一组文件名（或name + lastModified，如果name不足以满足您的使用案例）：

$scope.$watch(function() {
  return $scope.files.map(function(file) {
    return file && file.name;
  });
}, function() {

  // Code

}, true);

还看到了以下内容：

$scope.$watch(function() {
  return JSON.stringify($scope.files);
}, function() {

  // Code

});

深度$ watch on objects数组返回非法调用

1 个答案: