Javascript 如何打开一个点击离子模式？

我不熟悉Ionic和AugularJS，在设置页面中点击第三个hashtag搜索选项上的复选框/单选按钮打开模式框时遇到问题。我已包括一个

ng控制器

和

ng单击

以采取行动。我查看了调试器，它显示了一个错误：

GEThttp://localhost:8100/hashtag-模态[HTTP/1.1 404找不到1ms]

我知道404 Not Found意味着它没有找到templateUrl，但我拥有的每个导航页面都在index.html中，除了

app.js

文件中的

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>

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

修订标签

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

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

{{hashtagValue}}

爱奥尼亚有一个很好的代码笔示例，展示了如何使用

ng单击打开模式

离子模式与路线无关

您只需从服务器加载一个静态html模板，同一个html在所有绑定的爱奥尼亚模式中显示

不要声明单独的控制器，而是将其移动到同一控制器中：

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

然后在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>


{{hashtagValue}}
我编辑并更新了修订版，但单击仍不起作用，因为
错误：$ionicModal未定义
您必须在控制器中注入$ionicModal。检查我的更新代码。@MichaelWarren:单击右上角的“新联系人”图标。您可能一直在尝试单击这些名称。