Jak otworzyć modus jonowy po kliknięciu?

Question

Jestem nowy dla Ionic i AugularJS i mam problem z otwarciem modalnego pudełka po kliknięciu na pole wyboru/przycisku radiowego w trzeciej opcji wyszukiwania hashtag na stronie ustawień. Do podjęcia działania dodałem ng-controller i ng-click. Spojrzałem w debugera i wyświetlany jest komunikat o błędzie:

GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]

wiem, że 404 Not Found oznacza, że ​​nie znaleźć templateUrl ale każda strona nav mam jest w index.html i działają dobrze z wyjątkiem hashtag-modal.html w pliku app.js. Dlaczego to nie działa i jak mogę rozwiązać ten problem?

app.js

// Navigation pages 
app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('index', { 
    url: '/index', 
    templateUrl: 'index.html' 
    }) 
    .state('about', { 
    url: '/about', 
    templateUrl: 'about.html' 
    }) 
    .state('settings', { 
    url: '/settings', 
    templateUrl: 'settings.html' 
    }) 
    .state('hashtag-modal', { 
    url: '/hashtag-modal', 
    templateUrl: 'hashtag-modal', 
    controller: 'hashtag-modalCtrl' 
    }) 

    $urlRouterProvider.otherwise("/index"); // if no url found, go back to index 
}) 

// Hashtag Search option 
app.controller('hashtagController', ['$scope', function($scope) 
            { 
             $scope.hashtagValue = 'Search'; // default value 

             $scope.hashtag = function() 
             { 
              $scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value 


             }; 

            }]); 

// hashtag search modal 
app.controller('hashtag-modalCtrl', function($scope, $ionicModal) { 
    $ionicModal.fromTemplateUrl('hashtag-modal.html', { 
     scope: $scope, 
     animation: 'slide-in-up', 
     focusFirstInput: true 
    }).then(function(modal) { 
     $scope.modal = modal; 
    }); 
    $scope.openModal = function() { 
     $scope.modal.show(); 
    }; 
    $scope.closeModal = function() { 
     $scope.modal.hide(); 
    }; 
    // Cleanup the modal when we're done with it! 
    $scope.$on('$destroy', function() { 
     $scope.modal.remove(); 
    }); 
    // Execute action on hide modal 
    $scope.$on('modal.hidden', function() { 
     // Execute action 
    }); 
    // Execute action on remove modal 
    $scope.$on('modal.removed', function() { 
     // Execute action 
    }); 
}); 

index.html

<!-- SETTINGS --> 
<script id="settings.html" type="text/ng-template"> 
    <!-- The title of the ion-view will be shown on the navbar --> 
    <ion-view title="Settings" hide-back-button="false"> 
    <ion-content class="padding"> 
     <!-- The content of the page --> 
     <p>Check one of the options below to set how you wish to categorize and view your Instagram photos. 
     </p> 
     <div class="settings-list"> 
      <label class="item item-radio"> 
       <input type="radio" name="settings-group" value="recent"> 
       <div class="item-content"> 
        Recent 
       </div> 
       <i class="radio-icon ion-checkmark"></i> 
      </label> 
      <label class="item item-radio"> 
       <input type="radio" name="settings-group" value="popular"> 
       <div class="item-content"> 
        Most Popular 
       </div> 
       <i class="radio-icon ion-checkmark"></i> 
      </label> 
      <label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();modal.show();"> 
       <input type="radio" name="settings-group" value="search"> 
       <div class="item-content"> 
        <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span> 
       </div> 
       <i class="radio-icon ion-checkmark"></i> 
      </label> 
     </div> 
    </ion-content> 
    </ion-view> 
</script>  

<!-- HASHTAG SEARCH MODAL --> 
<script id="hashtag-modal.html" type="text/ng-template"> 
    <ion-modal-view hide-back-button="false"> 
    <ion-header-bar> 
     <h1 class="title">Hashtag Search</h1> 
    </ion-header-bar> 
    <ion-content> 
     <label class="item item-input"> 
     <i class="icon ion-search placeholder-icon"></i> 
     <input type="search" placeholder="Search"> 
     </label> 
    </ion-content> 
    </ion-modal-view> 
</script> 

---

uaktualnienia app.js

I dodaje $ionicModal do hashtagController, ale jest powiedziane Error: $ionicModal is undefined. Gdzie jeszcze jest nieokreślona?

// Hashtag Search option 
app.controller('hashtagController', ['$scope', function($scope, $ionicModal) 
{ 
    $scope.hashtagValue = 'Search'; // default value 

    $scope.hashtag = function() 
    { 
    $scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value 
    $ionicModal.fromTemplateUrl('hashtag-modal.html', { 
     scope: $scope, 
     animation: 'slide-in-up', 
     focusFirstInput: true 
    }).then(function(modal) { 
     $scope.modal = modal; 
    }); 
    $scope.openModal = function() { 
     $scope.modal.show(); 
    }; 
    $scope.closeModal = function() { 
     $scope.modal.hide(); 
    }; 
    // Cleanup the modal when we're done with it! 
    $scope.$on('$destroy', function() { 
     $scope.modal.remove(); 
    }); 
    // Execute action on hide modal 
    $scope.$on('modal.hidden', function() { 
     // Execute action 
    }); 
    // Execute action on remove modal 
    $scope.$on('modal.removed', function() { 
     // Execute action 
    }); 


             } 

            }]); 

poprawiona etykieta

<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();"> 
    <input type="radio" name="settings-group" value="search"> 
    <div class="item-content"> 
    <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span> 
    </div> 
    <i class="radio-icon ion-checkmark"></i> 
</label> 

Answer 1

jonowej modalnym nie ma nic wspólnego z drogami .

Wystarczy załadować statyczny szablon HTML z serwera, a ten sam html jest wyświetlany w trybie modalnym z wszystkimi powiązaniami.

Zamiast deklarowania kontroler oddzielna, przenieść go wewnątrz tego samego kontrolera:

app.controller('hashtagController', ['$scope', function($scope, $ionicModal) { 
    $scope.hashtag = function() { 
     $scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value 

     $ionicModal.fromTemplateUrl('hashtag-modal.html', { 
      scope: $scope, 
      animation: 'slide-in-up', 
      focusFirstInput: true 
     }).then(function(modal) { 
      $scope.modal = modal; 
      $scope.modal.show(); 
     }); 
    }; 

    $scope.openModal = function() { 
     $scope.modal.show(); 
    }; 

    $scope.closeModal = function() { 
     $scope.modal.hide(); 
    }; 


    $scope.$on('$destroy', function() { 
     $scope.modal.remove(); 
    }); 

    $scope.$on('modal.hidden', function() { 
     // Execute action 
    }); 

    $scope.$on('modal.removed', function() { 
     // Execute action 
    }); 
} 

Następnie w kodzie HTML:

<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();"> 
     <input type="radio" name="settings-group" value="search"> 
     <div class="item-content"> 
      <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span> 
     </div> 
     <i class="radio-icon ion-checkmark"></i> 
    </label> 

Answer 2

Ionic posiada ładny codepen przykład pokazujący, jak otworzyć modalnego z ng-click

http://codepen.io/ionic/pen/gblny