深$觀察對象數組返回非法調用

我有一個指令，我想看一個範圍的成員，一個對象數組。

 <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

深$觀察對象數組返回非法調用

回答

相關問題