Angular UI Bootstrap 模态弹出窗口答案

【问题标题】：Angular UI Bootstrap Modal PopupAngular UI Bootstrap 模态弹出窗口
【发布时间】：2016-02-05 20:50:37
【问题描述】：

我正在学习 angular ui bootstrap modal 形式，并在 plunker 中找到了一些示例。

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
       controller: ModalInstanceCtrl,
       resolve: {
        items: function () {
          return $scope.items;
         }
      }
    });

    modalInstance.result.then(function (selectedItem) {
       $scope.selected = selectedItem;
     }, function () {
       $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

这是链接http://plnkr.co/edit/ggtsdMSyYIRcXHe9zkw1?p=preview

问题是：

这条线有什么用

$scope.items = ['item1', 'item2', 'item3'];

为什么会有一个数组？

如何让它更简单？

【问题讨论】：

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

【解决方案1】：

这些项目在

期间使用resolve键传递给ModalInstanceCtrl

$modal.open({
  templateUrl: 'myModalContent.html',
   controller: ModalInstanceCtrl,
   resolve: {
    items: function () {
      return $scope.items;
     }
  }
});

这些项目被注入到ModalInstanceCtrl的items参数中。

在ModalInstanceCtrl 内部，这些项目用于生成模态窗口中显示的链接。

玩弄一下这些值并观察结果。

【讨论】：