Question

我正在使用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>

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

你的小提琴中的ui-bootstrap脚本出现了错误，这可能与你正在注入正确和最新的$uibModal服务这一事实有关，但是约会$modalInstance服务。

I created a plunker使用您的代码并将$modalInstance更新为$uibModalInstance，并且模式正常运行。

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

角度ng重复模式对话框不起作用

1 个答案: