单击时如何打开 Ionic Modal? [英] How to open up an Ionic Modal upon click?

问题描述

我是 Ionic 和 AugularJS 的新手，在单击设置页面中用于主题标签搜索的第三个选项上的复选框/单选按钮时，我在打开模态框时遇到问题.我已经包含了一个 ng-controller 和 ng-click 来采取行动.我查看了调试器，它显示了一个错误:

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

我知道 404 Not Found 意味着它没有找到 templateUrl 但我拥有的每个导航页面都在 index.html 中，它们工作正常，除了 hashtag-modal.html 在 >app.js 文件.为什么它不起作用，我该如何解决这个问题?

app.js

//导航页面app.config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('索引', {网址:'/索引'，模板网址:'index.html'}).state('关于', {网址:'/关于'，templateUrl: 'about.html'}).state('设置', {网址:'/设置'，templateUrl: 'settings.html'}).state('hashtag-modal', {url: '/hashtag-modal',templateUrl: 'hashtag-modal',控制器:'hashtag-modalCtrl'})$urlRouterProvider.otherwise("/index");//如果没有找到 url，则返回索引})//标签搜索选项app.controller('hashtagController', ['$scope', function($scope){$scope.hashtagValue = '搜索';//默认值$scope.hashtag = function(){$scope.hashtagValue = 'blackandwhitephotography';//如果选中，它会显示这个值};}]);//标签搜索模式app.controller('hashtag-modalCtrl', function($scope, $ionicModal) {$ionicModal.fromTemplateUrl('hashtag-modal.html', {范围:$范围，动画:向上滑动"，焦点第一输入:真}).then(函数(模态){$scope.modal = 模态；});$scope.openModal = function() {$scope.modal.show();};$scope.closeModal = function() {$scope.modal.hide();};//完成后清理模态！$scope.$on('$destroy', function() {$scope.modal.remove();});//对隐藏模态执行操作$scope.$on('modal.hidden', function() {//执行动作});//执行移除模态的动作$scope.$on('modal.removed', function() {//执行动作});});

index.html

<script id="settings.html" type="text/ng-template"><!-- 离子视图的标题将显示在导航栏上--><ion-view title="设置" hide-back-button="false"><ion-content class="padding"><!-- 页面内容--><p>选中以下选项之一以设置您希望如何分类和查看 Instagram 照片.</p><div class="settings-list"><label class="item item-radio"><input type="radio" name="settings-group" value="recent"><div class="item-content">最近的

<i class="radio-icon ion-checkmark"></i><label class="item item-radio"><input type="radio" name="settings-group" value="popular"><div class="item-content">最受欢迎

<i class="radio-icon ion-checkmark"></i><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;<span id="hashtagInput">{{hashtagValue}}</span>

<i class="radio-icon ion-checkmark"></i>

</离子含量></ion-view><!-- 标签搜索模式--><script id="hashtag-modal.html" type="text/ng-template"><ion-modal-view hide-back-button="false"><离子头栏><h1 class="title">标签搜索</h1></ion-header-bar><离子含量><label class="item item-input"><i class="icon ion-search placeholder-icon"></i><输入类型=搜索"占位符=搜索"></离子含量></ion-modal-view>

---

修改了 app.js

我在 hashtagController 中添加了一个 $ionicModal，但据说 Error: $ionicModal is undefined.还有什么地方是未定义的?

//标签搜索选项app.controller('hashtagController', ['$scope', function($scope, $ionicModal){$scope.hashtagValue = '搜索';//默认值$scope.hashtag = function(){$scope.hashtagValue = 'blackandwhitephotography';//如果选中，它会显示这个值$ionicModal.fromTemplateUrl('hashtag-modal.html', {范围:$范围，动画:向上滑动"，焦点第一输入:真}).then(函数(模态){$scope.modal = 模态；});$scope.openModal = function() {$scope.modal.show();};$scope.closeModal = function() {$scope.modal.hide();};//完成后清理模态！$scope.$on('$destroy', function() {$scope.modal.remove();});//对隐藏模态执行操作$scope.$on('modal.hidden', function() {//执行动作});//执行移除模态的动作$scope.$on('modal.removed', function() {//执行动作});}}]);

修订标签

<input type="radio" name="settings-group" value="search"><div class="item-content"><span class="ion-pound"></span>&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span>