Подтвердить что ты не робот

AngularJS как создать шаблон многократного использования для Bootstrap modal

Итак, я использую Modular AnglerJS Bootstrap (http://angular-ui.github.io/bootstrap/). Что работает нормально, но мне было интересно, могу ли я создать базовый шаблон, который может содержать заголовок и контент.

Затем он заполнит мой шаблон этой информацией. Шаблон будет иметь кнопку закрытия, кнопку отмены, наложение и т.д. Есть ли простой способ сделать это AngularJS?

Это взято из примера, и это о том, что у меня есть. Мое содержание находится в шаблонеUrl. Было бы неплохо пройти в модальном шаблоне, поэтому мне не нужно воссоздавать заголовок и кнопки закрытия для каждого модального файла, который я создаю.

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

ОТВЕТЫ

Ответ 1

Нашел способ сделать это с помощью директив. Он открывает модальный с пользовательской директивой, которая имеет шаблон. Тогда все, что у вас есть в вашем модальном формате, будет вставлено в ваш пользовательский шаблон. Это хорошо, потому что оно содержит больше, чем просто сообщение. Он может быть заполнен формами, предупреждениями или чем угодно.

Это была моя директива:

  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';
};