Angularjs 如何使用多模式脚本从HTML文件中获取$ionicModal TemplateUrl id

我在另一个单独的HTML文件中有ionic模式模板脚本，并通过$ionicModal.fromTemplateUrl（脚本id）从ProductCtrl调用这些脚本

这是我的密码

  $stateProvider
        .state('app.product', {
            url: "/products",
            views: {
                'menuContent@app': {
                    controller: 'ProductCtrl',
                    templateUrl: "js/product/templates/product.html"
                }
            }
        })

Product.html

<ion-view view-title='Products'>
  <ion-header-bar></ion-header-bar> 
  <ion-content></ion-content>
</ion-view>

我得到404错误

• 获取404（未找到）
• 获取404（未找到）
• 获取404（未找到）

---

有什么方法可以做到这一点吗？

您可以在下面的列表中看到一个基于以下内容的可能解决方案：

在索引中添加以下代码：

<div ng-include="'modals.html'" onload='onIncludeLoad()'></div>

---

看见我认为这只能在index.html（主html）中完成。这个解决方案可能无法很好地扩展。我正在用半打模板构建一个更大规模的应用程序，索引文件将非常沉重，而且更难维护目前我无法访问Plunker来验证您的编辑，但如果您提出，我认为它适合您；）

.controller('ProductCtrl', function($scope, $ionicModal){
    $ionicModal.fromTemplateUrl('modal_1.html', {
        scope: $scope,
        animation: 'slide-in-right'
    }).then(function (modal) {
        $scope.modal_1 = modal;
    });

    $ionicModal.fromTemplateUrl('modal_2.html', {
        scope: $scope,
        animation: 'slide-in-right'
    }).then(function (modal) {
        $scope.modal_2= modal;
    });

    $ionicModal.fromTemplateUrl('modal_3.html', {
        scope: $scope,
        animation: 'slide-in-right'
    }).then(function (modal) {
        $scope.modal_3= modal;
    });

<div ng-include="'modals.html'" onload='onIncludeLoad()'></div>

  <!-- Modals -->
  <script id="modal-1.html" type="text/ng-template">
    <div class="modal transparent">
      ...
    </div>
  </script>

  <script id="modal-2.html" type="text/ng-template">
    <div class="modal transparent">     
        ...
    </div>
  </script> 

  $scope.onIncludeLoad = function() {
    console.log("onIncludeLoad");
    // Modal 1
    $ionicModal.fromTemplateUrl('modal-1.html', {
      ...

    // Modal 2
    $ionicModal.fromTemplateUrl('modal-2.html', {
      ...

  }