AngularJS無法通過引導模式窗口中的$ index

Question

我在這裏撞牆。我正在使用ng-repeat來填充表格。每行內部我有2個按鈕，一個用於更新行內容和上傳文件。上傳按鈕打開引導模式窗口，用戶選擇文件並點擊提交。

提交按鈕使用ng-click運行一個使用$ index作爲參數的函數。但是無論選擇哪一行，$ index值總是相同的。

我不明白的是我在我的更新按鈕上使用了完全相同的語法（雖然在模式窗口之外），這很好。

HTML：

<tr ng-repeat="item in items | filter:search " ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)"> 
    <td>{{$index}}</td> 
    <td ng-hide="idHidden" ng-bind="item.Id"></td> 
    <td ng-hide="titleHidden"> 
     <span data-ng-hide="editMode">{{item.Title}}</span> 
     <input type="text" data-ng-show="editMode" data-ng-model="item.Title" data-ng-required /> 
    <td> 
     <button type="button" class="btn btn-primary uploadBtn" data-ng-show="editMode" data-toggle="modal" data-target="#uploadModal">Upload file <i class="fa fa-cloud-upload"></i></button> 
     <!-- Upload Modal --> 
     <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h3 class="modal-title" id="uploadModalLabel">Options</h3> 
       </div> 
       <div class="modal-body"> 
        <h4>Upload Documents</h4> 
        <form> 
        <div class="form-group"> 
         <select data-ng-model="type" class="form-control" id="fileTypeSelect"> 
          <option value="Policy">Policy</option> 
          <option value="SOP">SOP</option> 
         </select> 
         <br> 
         <div class="input-group"> <span class="input-group-btn"> 
          <input type="file" id="file"> 
          </span> 
         </div> 
         <br> 
         <button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button> 
        </form> 
        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
     <button type="button" data-ng-hide="editMode" data-ng-click="editMode = true;" class="btn btn-default pull-right">Edit <i class="fa fa-pencil-square-o"></i></button> 
     <button type="button" data-ng-show="editMode" data-ng-click="editMode = false; updateItem($index)" class="btn btn-default">Save</button> 
     <button type="button" data-ng-show="editMode" data-ng-click="editMode = false; cancel()" class="btn btn-default">Cancel</button> 
     </td>` 

JS：

$scope.uploadAttachment = function executeUploadAttachment(index, type) { 
var listname = "Risk Register"; 
var id = $scope.items[index].Id; 
console.log(indexID); 
readFile("uploadControlId").done(function(buffer, fileName) { 
    uploadAttachment(type, id, listname, fileName, buffer).done(function() { 
     alert("success"); 
    }).fail(function() { 
     alert("error in uploading attachment"); 
    }) 
}).fail(function(err) { 
    alert("error in reading file content"); 
}); 
} 

所以這是由NG-點擊觸發的功能uploadAttachment($index, type)沒有通過正確的索引號。它總是通過相同的，不管它被點擊的行是什麼。

我省略了一些無關的代碼。如果需要，我可以提供整個事情。

對我失蹤的任何建議？

編輯：

我試圖實現DonJuwe建議。

我已經加入這個我控制器內：

$scope.openModal = function(index) { 
var modalInstance = $modal.open({ 
    templateUrl: 'www.test.xxx/App/uploadModal.html', 
    controller: 'riskListCtrl', 
    resolve: { 
     index: function() { 
      return index; 
     } 
    } 
}); 
}; 

這是我的模式模板：

<div class="modal-header"> 
    <h3 class="modal-title" id="uploadModalLabel">Options</h3> 
</div> 
<div class="modal-body"> 
    <h4>Upload Documents</h4> 
    <form> 
     <div class="form-group"> 
     <select data-ng-model="type" class="form-control" id="fileTypeSelect"> 
      <option value="Policy">Policy</option> 
      <option value="SOP">SOP</option> 
     </select> 
     <br> 
     <div class="input-group"> <span class="input-group-btn"> 
      <input type="file" id="file"> 
      </span> 
     </div> 
     <br> 
     <button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button> 
    </form> 
    </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</div> 

最後我的函數駐留內RiskListCtrl（我使用的唯一控制器）：

$scope.uploadAttachment = function executeUploadAttachment(index, type) { 
var listname = "Risk Register"; 
var id = $scope.items[index].Id; 
console.log(indexID); 
readFile("uploadControlId").done(function(buffer, fileName) { 
    uploadAttachment(type, id, listname, fileName, buffer).done(function() { 
     alert("success"); 
    }).fail(function() { 
     alert("error in uploading attachment"); 
    }) 
}).fail(function(err) { 
    alert("error in reading file content"); 
}); 
} 

看來$scope.items[index].Id是空的。錯誤：Cannot read property 'Id' of undefined

Answer 1

模態窗口有其自己的範圍。這意味着你需要解決數據你想傳遞到模態的範圍。爲此，請在模式open(options)方法中使用resolve。

在我給你舉個例子之前，我想建議你的所有表項只有一個模態。這樣可以讓您保留一個可以輕鬆使用的模板id（現在，您爲每個無效的表項創建模板）。只需撥打一個控制器功能，並通過您的$index：

<button type="button" class="btn btn-primary uploadBtn" data-ng-show="editMode" ng-click="openModal($index)">Upload file <i class="fa fa-cloud-upload"></i></button> 

在你的控制器，創建模式實例和參考的模板：

$scope.openModal = function(index) { 
    var modalInstance = $modal.open({ 
     templateUrl: 'myPath/myTemplate.html', 
     controller: 'MyModalCtrl', 
     resolve: { 
      index: function() { 
       return index; 
      } 
     } 
    }); 
}; 

現在，您可以通過訪問index在MyModalCtrl的範圍注入index：

angular.module('myModule', []).controller('MyModalCtrl', function($scope, index) { 
    $scope.index = index; 
}); 

Answer 2

因爲您正在獲取模型外的索引值，您還可以使用ng-click，然後在你的控制器中調用一個函數，並將索引值存儲在一個臨時變量中，然後當你使用submit按鈕時，只需要創建另一個變量並將臨時變量的值賦給變量。例如：

 <button type="button" data-ng-show="editMode" data-ng-click="editMode = false; updateItem($index)" class="btn btn-default">Save</button> 

，然後作出一個函數在你的控制器

$scope.updateItem = functon(index) 
{ 
$scope.tempVar = index; 
} 

now use the value of tempVar in you function 

$scope.uploadAttachment = function executeUploadAttachment(index, type) { 
var index = tempVar;   //assign the value of tempvar to index 
var listname = "Risk Register"; 
var id = $scope.items[index].Id; 
console.log(indexID); 
readFile("uploadControlId").done(function(buffer, fileName) { 
    uploadAttachment(type, id, listname, fileName, buffer).done(function() { 
     alert("success"); 
    }).fail(function() { 
     alert("error in uploading attachment"); 
    }) 
}).fail(function(err) { 
    alert("error in reading file content"); 
}); 
}