AngularJS-将外部HTML文件包含到模式中 [英] AngularJS - include external html file into modals

问题描述

我正在使用AngularJS，并且我有一个html页面，其中包含几个引导程序模态.所有这些模式都使这个html文件开始变得有点沉重.

I m working with AngularJS and I have an html page which contain several bootstrap modals. This html file starts to be a bit heavy with all these modals.

是否可以在不失去范围的情况下将外部html文件包含在这些模式中?

Is it possible to include into these modals external html files without loosing the scope?

推荐答案

按照以下步骤操作:

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

模态内容

<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
    <h3 class="modal-title">Modal!</h3>
</div>
<div class="modal-body">
    <div >Body</div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="$close('awesome')">OK</button>
    <button class="btn btn-warning" ng-click="$dismiss('nah')">Cancel</button>
</div>
</script>

HTML

<a data-ng-click="open(vehicle)" href=""><span class="glyphicon glyphicon-open"></span>View</a>

这篇关于AngularJS-将外部HTML文件包含到模式中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！