AngularJS如何为Bootstrap模态创建一个可重用的模板答案

【问题标题】：AngularJS how to create a reusable template for Bootstrap modalAngularJS如何为Bootstrap模态创建一个可重用的模板
【发布时间】：2014-10-30 13:07:37
【问题描述】：

所以我正在使用 AngularJS Bootstrap 模式 (http://angular-ui.github.io/bootstrap/)。哪个工作正常，但我想知道我是否可以创建一个可以包含标题和内容的基本模板。

然后它将使用这些信息填充我的模板。该模板将有一个关闭按钮、取消按钮、叠加层等。AngularJS 有没有简单的方法来做到这一点？

这是从示例中获取的，它是关于我所拥有的。我的内容在 templateUrl 中。传入模态模板会很好，这样我就不必为我创建的每个模态重新创建标题和关闭按钮。

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

【问题讨论】：

您可以为模态窗口的特定部分创建几个指令。

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

查看 John Papa 的 Hot Towel Angular BootStrap“模板”。您可以从那里领取：

https://github.com/johnpapa/HotTowel-Angular/blob/master/NuGet/HotTowel-NG/app/common/bootstrap/bootstrap.dialog.js

【讨论】：

【解决方案2】：

找到了一种使用指令的方法。它使用具有模板的自定义指令打开一个模式。然后，您在模态中的任何内容都将插入到您的自定义模板中。这很好，因为它包含的不仅仅是一条消息。它可以填写表格、警报或任何您想要的内容。

这是我的指令：

  app.directive('modalDialog', function() {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      link: function(scope) {
        scope.cancel = function() {
          scope.$dismiss('cancel');
        };
      },
      template:
        "<div>" +
          "<div class='modal-header'>" +
            "<h3 ng-bind='dialogTitle'></h3>" +
            "<div ng-click='cancel()'>X</div>" +
          "</div>" +
          "<div class='modal-body' ng-transclude></div>" +
        "</div>"
    };
  });

模态（'yourTemplate.html'）：

<modal-dialog>
  <div> Your body/message </div>
</modal-dialog>

Javascript：

app.controller('YourController', ['$scope', '$modal', function($scope, $modal) {
  $scope.openModal = function () {
    $modal.open({
      templateUrl: 'yourTemplate.html',
      controller: ModalController
    });
  };
}]);

var ModalController = function ($scope, $modalInstance) {
  $scope.dialogTitle = 'Your title';
};

【讨论】：

$modal 是 AngularJS 的一部分吗？