Angular $ index在ng-repeat指令範圍內始終爲0

我有一系列可以重複使用的項目。在ng-repeat內部有一個需要傳遞給它的$索引的指令。指令中的repeaterIndex始終爲0，即使該數組內有多個項目。我試過傳遞的類別而不是$索引，它總是第一類傳遞給指令。

這裏的控制器代碼

angular.module('app') 
.controller('ImageUploadCtrl', ['$scope', 'fooSvc', 
    function ($scope, fooSvc) { 
     fooSvc.getCategories().then(function(response){ 
      $scope.categories = response.data; 
     }, function (error) { 
      console.log(error); 
     }); 

     $scope.uploadCategoryPhoto = function(categoryIndex){ 
      //upload photo 
     }; 
    }]);

NG重複碼：

<li ng-repeat="category in categories"> 
    <my-directive repeater-index="{{$index}}" image-object="category.newFeaturedImageObj" callback="uploadCategoryPhoto"></my-directive> 
</li>

myDirective.js

angular.module('app') 
.directive('myDirective', [function() { 
    return { 
     restrict: 'E', 
     scope: { 
      callback: '=', 
      imageObject: '=', 
      repeaterIndex: '@' 
     }, 
     templateUrl: 'app/myDirective/myDirective.html', 
     link: function(scope) { 
      scope.handleFileSelect = function(element) { 
       var file = element.files[0]; 
       var reader = new FileReader(); 
       reader.onload = function (event) { 
        scope.$apply(function() { 
         scope.imageObject.image = event.target.result; 
         scope.callback(scope.repeaterIndex); 
        }); 
       }; 
       reader.readAsDataURL(file); 
      }; 
     } 
    }; 
}]);

myDirective.html

<div> 
    <input id="upload" type="file" accept="image/*" 
     onchange="angular.element(this).scope().handleFileSelect(this)"/> 
    <label for="upload"> 
     Upload 
    </label> 
</div>

如果我用在另一個地方的指令，並給它一個不同的回調屬性，如回調=「Foobar的」，該指令仍然會打電話uploadCategoryPhoto。就好像頁面上的所有指令都採用第一個指令的屬性。

來源

2016-09-19 Titus Popovici

你可以提供一個蹲跳者嗎？所以我們可以幫助你解決它，很多代碼，很難弄清楚整個流程。 – Mikki

我試圖在jsfiddle中重現它，但我無法完成它。我不確定這種差異會使它表現如何。 –

嘗試比較版本與js小提琴 – Mikki

你的代碼看起來不錯。所有工作如預期。

看jsfiddle

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function($timeout) { 
 
    var me = this; 
 
    $timeout(function() { 
 
     me.categories = [{ 
 
     newFeaturedImageObj: {} 
 
     }, { 
 
     newFeaturedImageObj: {} 
 
     }, { 
 
     newFeaturedImageObj: {} 
 
     }]; 
 
    }, 5000); 
 

 
    this.uploadCategoryPhoto = function(categoryIndex) { 
 
     console.log('uploadCategoryPhoto', categoryIndex); 
 
     //upload photo 
 
    }; 
 
    }) 
 
    .directive('myDirective', [ 
 
    function() { 
 
     return { 
 
     restrict: 'E', 
 
     scope: { 
 
      callback: '=', 
 
      imageObject: '=', 
 
      repeaterIndex: '@' 
 
     }, 
 
     template: `<div> 
 
    <input id="upload" type="file" accept="image/*" 
 
     onchange="angular.element(this).scope().handleFileSelect(this)"/> 
 
    <label for="upload"> 
 
     Upload 
 
    </label> 
 
</div> `, 
 
     link: function(scope) { 
 
      scope.handleFileSelect = function(element) { 
 
      var file = element.files[0]; 
 
      var reader = new FileReader(); 
 
      reader.onload = function(event) { 
 
       scope.$apply(function() { 
 
       scope.imageObject.image = event.target.result; 
 
       console.log('repeaterIndex', scope.repeaterIndex); 
 
       scope.callback(scope.repeaterIndex); 
 
       }); 
 
      }; 
 
      reader.readAsDataURL(file); 
 
      }; 
 
     } 
 
     }; 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController as vm"> 
 
    Appear after 5 seconds. 
 
    <ul> 
 
     <li ng-repeat="category in vm.categories"> 
 
     <my-directive repeater-index="{{$index}}" image-object="category.newFeaturedImageObj" callback="vm.uploadCategoryPhoto"></my-directive> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-09-19 04:37:21

是的，我剛剛嘗試複製它，似乎無法做到這一點。不知道是什麼原因可能導致本地問題。 –

我相信，你應該聲明「類別」之首。目前，$ scope.categories是在回調中聲明的，但在回調代碼執行的時候，DOM已經被渲染，「類別」是undefined。如果您首先聲明「類別」並將其分配給一個數組，則觀察者將被註冊爲「類別」，並且當回調執行並分配數據時，觀察者將觸發並更新DOM。

angular.module('app') 
.controller('ImageUploadCtrl', ['$scope', 'fooSvc', 
    function ($scope, fooSvc) { 
     $scope.categories = []; // declare "categories" 
     fooSvc.getCategories().then(function(response){ 
      $scope.categories = response.data; 
     }, function (error) { 
      console.log(error); 
     }); 

     $scope.uploadCategoryPhoto = function(categoryIndex){ 
      //upload photo 
     }; 
    }]);

請試試看。

來源

2016-09-19 05:36:13

這不是問題，因爲它可以與deffer創建的'categories'數組一起工作。看到我的答案。 –

Angular $ index在ng-repeat指令範圍內始終爲0

回答

相關問題