AngularJS & Bootstrap 模式 - 在控制器外加载模板

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 文件中，并将其 url 放在 templateUrl 中。所以$modal每次需要的时候都可以从服务器上获取。

AngularJS & Bootstrap 模式 - 在控制器外加载模板

AngularJS & Bootstrap Modal - loading template outside controller

twitter-bootstrap

angularjs

angular-bootstrap