Angular - 使用模板作为多个模板的容器

Question

这是一个简单的问题：

是否可以在一个模板中包含多个模板，并在需要时调用所需的模板？

让我更好地解释一下：

我有一个我这样称呼的模态：

$scope.showErrorModal = ->
    errorModal = $ionicPopup.show(
      title: 'Issues list'
      scope: $scope
      templateUrl: './sections/modal/modal.tpl.html'
      buttons: [{text: 'Close',type: 'button-assertive'}
      ])
    errorModal.then (res) ->
      console.log 'tapped!', res
      return
    return

如您所见，我使用的是外部模板。

问题是这样我每次需要更改模态时都需要创建不同的模板。

我想做的（如果可能的话）是能够在 modal.tpl.html 中创建各种子模板并以正确的模式调用它们。

下面是一些示例代码：

modal.tpl.html:

<div id="error-template">
// here the error-modal stuff
</div>

<div id="success-template">
// here the success-modal stuff
</div>

然后从控制器中这样调用它们，例如：

$scope.showErrorModal = ->
        errorModal = $ionicPopup.show(
          title: 'Issues list'
          scope: $scope
          templateUrl: './sections/modal/modal.tpl.html#error-template' //Just to make it clear that i want to use only one part of that file
          buttons: [{text: 'Close',type: 'button-assertive'}
          ])
        errorModal.then (res) ->
          console.log 'tapped!', res
          return
        return

这纯属虚构，还是有可能？是否有其他解决方案来解决此类问题？

Answer 1

除了减少网络请求的数量外，我看不出执行您在问题中提到的任何实际好处。无论如何，您可能想要使用多个模态指令（errorModal、successModel 等）来更好地划分代码。

如果您想减少网络请求，有一个 $templateCache 服务可以让您在第一次请求时预加载您的模板，方式如下：

<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

您可能还想查看 angular ui router，这是一种更容易允许嵌套和主模板的替代路由器实现。

Angular - 使用模板作为多个模板的容器

Angular - use template as container for multiple templates

angularjs

angular-template

ionic-popup