深$观察对象数组返回非法调用

我有一个指令，我想看一个范围的成员，一个对象数组。

 <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正在返回非法调用。

任何想法如何使这项工作？我正在使用角1.4.5

来源

2017-01-09 WNB

你可以发布一个plunker或例子吗？ –

当您提出有关您的代码导致的问题的问题时，如果您提供可用于重现问题的代码，您将得到更好的答案。该代码应该是[最小，完整和可验证]（http://stackoverflow.com/help/mcve）。 – georgeawg

'$ watch'只适用于JavaScript对象，数组，字符串和基元。当内容包含DOM元素，斑点，文件，事件等特殊对象时，会出现问题 – georgeawg

这是因为您的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 

});

来源

2017-01-09 16:58:53 tasseKATT

@ user2899925不客气:) – tasseKATT

深$观察对象数组返回非法调用

回答

相关问题