AngularJS如何创建引导模式可重复使用的模板 [英] AngularJS how to create a reusable template for Bootstrap modal

问题描述

所以，我现在用的是AngularJS引导模式（ http://angular-ui.github.io/bootstrap/）。这是工作的罚款，但我在想，如果我可以创建一个可以在标题和内容的基本模版。

然后，它会填充我与这些信息模板。该模板将有一个关闭按钮，取消按钮，叠加等是否有一个简单的方法来做到这一点AngularJS？

这是从示例采取和它是关于我有什么。我的内容是在templateUrl。这将是很好的模式模板来传递，所以我不必重新保存为每个模式创建的标题和关闭按钮。

  VAR modalInstance = $ modal.open（{
  templateUrl：myModalContent.html'，
  控制器：ModalInstanceCtrl，
  大小：大小，
  解析：{
    项目：功能（）{
      返回$ scope.items;
    }
  }
}）;
 

解决方案

发现了一种与指令去做。它开辟了以具有模板的自定义指令模态。那么无论你在你的模式将被插入到您的自定义模板。这是不错的，因为它拥有的不仅仅是一个信息多。它可以充满形式，警报或任何你想要的。

这是我的指令：

  app.directive（'modalDialog'，函数（）{
    返回{
      限制：'E'，
      更换：真实，
      transclude：真实，
      链接：功能（范围）{
        scope.cancel =功能（）{
          。范围$解雇（'取消'）;
        };
      }，
      模板：
        ＆LT; D​​IV＆gt;中+
          ＆LT; D​​IV CLASS ='模头'＆gt;中+
            ＆LT; H3 NG绑定='DIALOGTITLE'＆GT;＆LT; / H3＆gt;中+
            ＆LT; D​​IV NG点击='取消（）'＆GT; X＆LT; / DIV＆gt;中+
          ＆LT; / DIV＆gt;中+
          ＆LT; D​​IV CLASS ='模体'NG-transclude＆GT;＆LT; / DIV＆gt;中+
        ＆LT; / DIV＆gt;中
    };
  }）;
 

模态（'yourTemplate.html'）

 ＆LT;模式-对话框＆GT;
  ＆LT; D​​IV＆GT;你的身体/消息＆LT; / DIV＆GT;
＆LT; /莫代尔-对话框＆GT;
 

使用Javascript：

  app.controller（'YourController'，['$范围，$模式'，函数（$范围，$模态）{
  $ scope.openModal =功能（）{
    $ modal.open（{
      templateUrl：yourTemplate.html'，
      控制器：ModalController
    }）;
  };
}]）;VAR ModalController =功能（$范围，$ modalInstance）{
  $ scope.dialogTitle ='您的标题';
};
 

So I am using the AngularJS Bootstrap modal (http://angular-ui.github.io/bootstrap/). Which is working fine but I was wondering if I could create a basic template that can take in a title and the content.

Then it would populate my template with these info. The template would have a close button, cancel button, overlay, etc. Is there an easy way to do this AngularJS?

This is taken from the example and it's about what I have. My content is in the templateUrl. It would be nice to pass in the modal template so I don't have to keep recreating the title and close buttons for every modal I create.

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

解决方案

Found a way to do it with directives. It opens up a modal with a custom directive that has a template. Then whatever you have in your modal will be inserted into your custom template. This is nice because it holds more than just a message. It can be filled with forms, alert, or anything you want.

This was my directive:

  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>"
    };
  });

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

这篇关于AngularJS如何创建引导模式可重复使用的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！