Question

我有一个对话框，在同一页面的3个场景中使用。我创建了一个类似于下面的控制器：

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


 <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Im a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a ng-click="selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

问题是，由于此对话框正在同一页面的3个不同部分中使用，因此我遇到了模板问题。当我把html模板放在控制器之外时，在页面html的最后，它失败并给了我404.

但是，我不希望在同一页面的3个位置重复相同的HTML块。有人可以告诉我，是否有一种不同的方式来调用控制器外的模板？

Answer 1

重用模板的好方法是将其放在单独的html文件中，并将其网址放在templateUrl中。因此$modal可以在每次需要时从服务器获取它。

AngularJS＆amp; Bootstrap模态 - 在控制器外部加载模板

1 个答案: