Question

我正在使用AngularJS，我有一个包含几个引导模式的html页面。所有这些模态的html文件开始有点沉重。

是否可以在不丢失范围的情况下将外部html文件包含到这些模态中？

Answer 1

如果您使用Angular UI Bootstrap lib，则可以在打开模式时设置任何模板URL：http://angular-ui.github.io/bootstrap/

$modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl'
});

不仅可以，而且推荐，因为很可能目前您将所有模态都放在同一页面中并使用ng-show / ng-if来切换它们：这会给你一个更重的DOM和/或一个更长的$范围消化。

Answer 2

使用templateUrl属性或SCRIPT标记id属性指向外部HTML文件（不创建自定义模板文件夹）似乎可以在最近的Firefox（46.0）中使用，但不能在Chrome（49.0）或Opera（36.0）中使用）。因此，内联模板现在似乎仍然更安全。

Answer 3

按照：

 $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文件包含到模态中

3 个答案:

模式内容

HTML