Angular ng-repeat 模式对话框不工作

Question

我正在使用 MEANJS，其中 angularjs 是我的前端。我有我的文章列表，我正在调出一个模态来编辑数据，但没有这样做，模态不起作用。我正在使用 angular UI bootstrap 作为模态。我的 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>

JS

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.

Answer 1

您的 fiddle 中的 ui-bootstrap 脚本出现错误，这可能与您注入正确的和更高版本有关-最新 $uibModal 服务但过时 $modalInstance 服务。

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

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

Angular ng-repeat 模式对话框不工作

Angular ng-repeat modal dialog does not work

angularjs

angular-ui-bootstrap

bootstrap-modal

meanjs