How can I get $ionicModal TemplateUrl id from HTML file with multiple modal scripts

Question

I have ionic-modal template scripts in another separate HTML file and calling those from ProductCtrl by $ionicModal.fromTemplateUrl (script_id)

Here is my code,

  $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>

Product-Modals.html

<script id="modal_1.html" type="text/ng-template">...</script>
<script id="modal_2.html" type="text/ng-template">...</script>
<script id="modal_3.html" type="text/ng-template">...</script>
<script id="modal_4.html" type="text/ng-template">...</script>

Controller ProductCtrl

.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;
    });

I am getting 404 error

GET http://localhost:8100/modal_1.html 404 (Not Found)
GET http://localhost:8100/modal_2.html 404 (Not Found)
GET http://localhost:8100/modal_3.html 404 (Not Found)

is there any way to do this...?

See http://stackoverflow.com/questions/11322144/angularjs-multiples-partials-in-single-html. I think it can be done only in the index.html (main html). — beaver, Dec 17 '15 at 07:04
This solution is probably does not scale well. I'm building a larger scale application with half a dozens of templates, index file is going to be very heavy and harder to maintain — Rjun, Dec 17 '15 at 09:18

score 3 · Accepted Answer · edited Dec 23 '15 at 13:32

You can see in the following Plunker a possible solution based on ng-include:

http://plnkr.co/edit/3nDKuAjHtd1Yj5EcLCtS?p=preview

In your index add this code:

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

Pay attention to wrap in single quotes the constant 'modals.html', which is the file containing all your modal templates like these:

  <!-- 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>

In your controller the onIncludeLoad handler:

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

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

  }

At this moment I can't access the Plunker to verify your edit, but if you proposed it I think it's working for you ;) — beaver, Dec 22 '15 at 12:10

How can I get $ionicModal TemplateUrl id from HTML file with multiple modal scripts

1 Answers1