Tıklandığında bir İyonik Modal nasıl açılır?

Question

Iyonik ve AugularJS için yeni ve ayarları sayfasında hashtag arama için üçüncü seçenekte bir onay kutusu/radyo düğmesine tıkladığınızda bir modal kutusu açarken bir sorun yaşıyorum. Harekete geçmek için ng-controller ve ng-click'u ekledim. Ben ayıklayıcısında baktım ve bir hata görüntülenir:

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

Ben Bulunamadı 404 o bulamadık demek olduğunu biliyorum templateUrl ama ben her nav sayfa index.html olduğunu ve sorunsuz çalışırlar app.js dosyasında hashtag-modal.html dışında. Neden çalışmıyor ve bu sorunu nasıl çözebilirim?

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

---

Düzeltme app.js

Birilave app.js hashtagController için, ancak Error: $ionicModal is undefined denilmektedir. Başka nerede tanımsız?

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


             } 

            }]); 

Revize etiket

<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

iyonik modal ile bir kalıcı nasıl açılacağını gösteren güzel bir codepen örnek vardır .

Sadece sunucudan statik bir html şablonu yüklüyorsunuz ve tüm hilelerle aynı html iyonik modelde gösterilir.

yerine ayrı kontrolör ilan etme, aynı kumanda içine taşıyın:

<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

İon yolları ile ilgisi olan bir ng-click

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