在 angularjs 中创建可重用模式窗口的最佳方法

Question

我正在使用 html5、angularjs、bootstrap。因此，它们中的每一个都提供了许多选项来创建模态窗口。我的整个网站有两件事，一是确认对话框或表单对话框。所以这是最好的可重用方法。我应该使用 html5 还是创建指令？

Answer 1

正如cmets中提到的ui-bootstrap Modal非常有用。 仅举个例子，这里是一个确认模式的工厂，您可以根据自己的用例进行扩展：

yourApp.factory("dialog", ["$modal",
  function($modal) {
    var dialogService = {
      confirm: function(options) {
        var modalInstance = $modal.open({
          templateUrl: 'partials/confirm-modal.html',
          controller: ['$scope',
            function($scope) {
              $scope.header = options.header;
              $scope.body = options.body;
              $scope.confirmText = options.confirmText || "Close";
              $scope.cancelText = options.cancelText || "Confirm";
              $scope.hideCancelButton = options.hideCancelButton;
              $scope.cancel = function() {
                modalInstance.dismiss('cancel');
              };
              $scope.confirm = function() {
                modalInstance.close();
              };
            }
          ]
        });
        return modalInstance.result;
      }
    }
  }
])

这是你的模板：

<div class="modal-header">
    <button type="button" data-dismiss="modal" aria-hidden="true" class="btn close" ng-click="cancel()">&times;</button>
    <h4 id="noteLabel" class="modal-title">{{header}}</h4>
</div>
<div class="modal-body">

<p ng-bind-html="body" style="font-size: 16px"></p>

</div>
<div class="modal-footer">
    <button ng-show="!hideCancelButton" class="btn btn-default" ng-click="cancel()">{{cancelText}}</button>
    <button ng-click="confirm()" class="btn btn-primary">{{confirmText}}</button>
</div>