deep $ watch в массиве объектов, возвращающий незаконный вызов

Question 1

У меня есть директива, и я пытаюсь наблюдать за одним из членов области видимости, массивом объектов.

        <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, похоже, не помогает; deep $ watch для массива объектов возвращает недопустимый вызов.

Есть идеи, как это сделать? Я использую угловой 1.4.5

angularjs arrays watch

0

WNB 9 Янв 2017 в 18:50

Можете выложить плункер или пример?

–

Eric F.

9 Янв 2017 в 19:25

Задавая вопрос о проблеме, вызванной вашим кодом, вы получите гораздо лучшие ответы, если предоставите код, который люди могут использовать для воспроизведения проблемы. Этот код должен быть минимальным, полным и проверяемым.

–

georgeawg

9 Янв 2017 в 19:43

$watch хорошо работает только с объектами, массивами, строками и примитивами JavaScript. Когда содержимое включает в себя специальные объекты, такие как элементы DOM, капли, файлы, события и т. Д., Это становится проблематичным.

–

georgeawg

9 Янв 2017 в 19:55

Извините, запомню в следующий раз, вы правы, спасибо за замечание!

–

WNB

10 Янв 2017 в 11:56

Answer

Это потому, что ваш массив images содержит File объектов.

Следующее можно найти в документации $ watch. :

Это не должно использоваться для отслеживания изменений в объектах, которые являются или содержат объекты File из-за ограничений angular.copy.

Вам придется решать это по-другому.

Например, вместо просмотра массива имен файлов (или 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

});

3

tasseKATT 9 Янв 2017 в 19:58

Question 2

Это потому, что ваш массив images содержит File объектов.

Следующее можно найти в документации $ watch. :

Это не должно использоваться для отслеживания изменений в объектах, которые являются или содержат объекты File из-за ограничений angular.copy.

Вам придется решать это по-другому.

Например, вместо просмотра массива имен файлов (или 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

});

3

tasseKATT 9 Янв 2017 в 19:58

deep $ watch в массиве объектов, возвращающий незаконный вызов

1 ответ

Похожие вопросы

Новые вопросы

angularjs