Angularjs 安圭拉酒店；引导模式-在控制器外部加载模板

我有一个对话框，在同一页面的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>

var modalInstance=$modal.open({
templateUrl:'myModalContent.html'，
控制器：“ModalInstanceCtrl”，
尺寸：尺寸，
决心：{
项目：功能（）{
返回$scope.items；
}
}
});
我是模态的！


{{item}}


选定：{{Selected.item}
好啊
取消

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

---

但是，我不希望在同一页面的3个位置重复相同的HTML块。有人能告诉我是否有其他方法调用控制器外部的模板吗？

重用模板的一个好方法是将模板放在单独的html文件中，并将其url放在

templateUrl

中。因此，

$modal

可以在每次需要时从服务器获取它。

这将是理想的方案。然而，我正在使用的系统将所有内容都压缩到1个html文件中，因此我想知道是否可以将页面底部某个位置的脚本标记中的html块从控制器中取出，以便在所有3种情况下都使用它。有没有一种方法可以告诉控制器使用HTML块，它在HTML块之外，但在同一页上？好吧，我的错！您是否将该模板放入

$rootElement

？非常感谢！！那是我的问题。模板位于$rootElement之外