点击后如何打开离子模式？(How to open up an Ionic Modal upon click?)

 我是Ionic和AugularJS的新手，在点击设置页面中的第三个选项进行hashtag search的复选框/单选按钮时，我遇到了打开模式框的问题。 我已经包含一个ng-controller和ng-click来采取行动。 我看着调试器，它显示一个错误： 
 
 GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms] 
 
 我知道404未找到意味着它没有找到templateUrl，但我拥有的每个导航页面都在index.html中，并且除了app.js文件中的hashtag-modal.html外，它们hashtag-modal.html正常工作。 为什么它不工作，我该如何解决这个问题？ 
 
 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>
 
 
 修改后的app.js 
 
 我在hashtagController添加了一个$ionicModal ，但据说Error: $ionicModal is undefined 。 还有哪些地方没有定义？ 
 
// 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
    });


                                         }

                                     }]);
 
 修订后的标签 
 
<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>

I am new to Ionic and AugularJS and I am having a problem opening up a modal box upon click on a checkbox/radio button on the third option for hashtag search in the settings page. I have included an ng-controller and ng-click to take action. I looked in the debugger and it displayed an error: 
 
GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]
 
I know that 404 Not Found means it didn't find the templateUrl but every nav page I have is in the index.html and they work fine except hashtag-modal.html in the app.js file. Why isn't it working and how do I resolve this issue?
 
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>
 
 
Revised app.js
 
I added an $ionicModal to the hashtagController but it is said Error: $ionicModal is undefined. Where else is it undefined?
 
// 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
    });


                                         }

                                     }]);
 
Revised label
 
<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>

原文：https://stackoverflow.com/questions/27285472