Angular ng-repeat 模态对话框不起作用答案

【问题标题】：Angular ng-repeat modal dialog does not workAngular ng-repeat 模态对话框不起作用
【发布时间】：2016-02-20 10:50:52
【问题描述】：

我正在使用 MEANJS，其中 angularjs 是我的前端。我有我的文章列表，我带来了一个模态来编辑数据，但没有这样做并且模态不起作用。我正在为模态使用角度 UI 引导程序。我的fiddle。

HTML

<div ng-controller="MyCtrl">
  <div ng-repeat="order in orders | limitTo:5">
    <button class="btn btn-default" ng-click="open(order)">Edit {{ order.title }}</button>
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3>{{ order.title }}</h3>
      </div>
      <div class="modal-body">
        <p ng-repeat="orde in order.orderfood">
      {{orde.name}} {{orde.qty}} {{orde.price}}
    </p>
      </div>
    </script>
  </div>
</div>

myApp.factory('Orders', ['$resource', function($resource) {
  return $resource('https://safe-depths-4702.herokuapp.com/api/orders/:orderId', {
    orderId: '@_id'
  }, {
    update: {
      method: 'PUT'
    }
  });
}]).controller('ModalInstanceCtrl', function($scope, $stateParams, $modalInstance, Orders) {
  $scope.order = Orders.get({
    orderId: $stateParams.orderId
  });

  $scope.ok = function(order) {

    $modalInstance.close($scope.order);
  };

}).controller('MyCtrl', ['$scope', '$uibModal', 'Orders', function($scope, $uibModal, Orders) {
  $scope.orders = Orders.query();
  $scope.name = 'Superhero';
  $scope.open = function(size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        order: function() {
          return $scope.order;
        }
      }
    });
  };
}]);

我的fiddle。

【问题讨论】：

您的弹出窗口工作的原因是因为当您执行 ng-click() 时..您传递了一个参数 order... Order 未定义。

标签： angularjs angular-ui-bootstrap bootstrap-modal meanjs

【解决方案1】：

您的小提琴中的 ui-bootstrap 脚本出现错误，这可能与您注入正确且最新的 $uibModal 服务有关，但已过期日期$modalInstance 服务。

I created a plunker 使用您的代码并将$modalInstance 更新为$uibModalInstance，并且模态可以正常工作。

正如您编写的那样，您使用$resource.query 方法获取所有订单的数组，并在您的html 中将数组设置在$scope 上。无需在modal中再次查询；由于您已经在 ng-repeat 中遍历了 $scope.orders，因此您只需传入要在 ng-click 函数中打开的顺序：ng-click="open(order)" 并匹配传递给控制器中函数的参数（在你的小提琴中是size，而不是order）。您可以解析所选订单的值并将其注入模态的控制器，而不是从模态的控制器中对该特定订单运行冗余查询。您只将大小作为 ng-click 函数参数，如果您愿意，您可以重新添加...为简单起见，我将其删除。

【讨论】：