AngularJS 无法从引导模式窗口传递 $index答案

【问题标题】：AngularJS can't pass $index from bootstrap modal windowAngularJS 无法从引导模式窗口传递 $index
【发布时间】：2015-08-11 22:43:54
【问题描述】：

我在这里用头撞墙。我正在使用 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-click 触发的函数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

【问题讨论】：

<td>{{$index}}</td> 也总是一样吗？
Nope <td>{{$index}}</td> 显示正确的数字。
您指的是$index 相同的这一行？ <button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button>
是的，函数uploadAttachment($index, type) 没有得到正确的索引号。我将编辑我的操作以使其更清晰。
范围似乎有问题，但没有工作样本不确定

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案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;
});

【讨论】：

【解决方案2】：

既然你在模型之外获取索引值，那么你也可以使用 ng-click 然后在你的控制器中调用一个函数并将索引值存储在一个临时变量中，然后当你使用提交按钮时，只需使用 make另一个变量并将临时变量的值分配给您的变量。例如：

     <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");
});
}

【讨论】：