如何向angular-ui-bootstrap的$modal传递自定义属性

AngularJS的$modal.open()方法支持通过resolve配置项传递自定义参数，这些参数会被注入到指定控制器中，刚好能解决你复用同一控制器渲染不同奖品数组的需求，具体实现如下：

1. 修改模态框调用代码，添加参数传递 #

假设父作用域里有两个奖品数组$scope.prizeGroup1和$scope.prizeGroup2，调用时通过resolve分别传入对应的数组：

打开第一个模态框：

$modal.open({
  templateUrl: "components/prize-info/prize-info.html",
  windowClass: "prize-info",
  controller: "PrizeInfoController",
  resolve: {
    targetPrizes: function() {
      return $scope.prizeGroup1; // 传递第一组奖品数组
    }
  }
});

打开第二个模态框：

$modal.open({
  templateUrl: "components/prize-info/prize-info.html",
  windowClass: "prize-info",
  controller: "PrizeInfoController",
  resolve: {
    targetPrizes: function() {
      return $scope.prizeGroup2; // 传递第二组奖品数组
    }
  }
});

这里可以移除原有的scope: $scope配置，通过resolve传递明确参数的方式更模块化，避免控制器依赖父作用域的隐式数据。

2. 调整控制器，注入并使用传递的参数 #

在PrizeInfoController中注入targetPrizes参数，绑定到控制器作用域供模板使用：

angular.module('yourApp').controller('PrizeInfoController', ['$scope', 'targetPrizes', function($scope, targetPrizes) {
  $scope.displayPrizes = targetPrizes; // 将传递的数组绑定到作用域
}]);

3. 模板中统一渲染数组 #

模板prize-info.html直接遍历displayPrizes即可，无需区分是哪一组数据：

<div class="prize-container">
  <div ng-repeat="prize in displayPrizes" class="prize-item">
    <!-- 渲染奖品内容，例如：{{prize.name}} - {{prize.detail}} -->
  </div>
</div>

补充说明 #

• resolve支持传递多个参数，每个属性都会作为依赖注入到控制器中，适用于更复杂的场景。
• 如果确实需要保留父作用域的部分数据，也可以同时保留scope: $scope，但优先推荐resolve的方式，让控制器职责更清晰。

内容的提问来源于stack exchange，提问作者pesho hristov