点击后如何打开Ionic Modal？ [英] How to open up an Ionic Modal upon click?

问题描述

我是Ionic和AugularJS的新用户，我在设置页面中点击第三个选项上的复选框/单选按钮打开模式框时遇到问题。我已经包含 ng-controller 和 ng-click 来采取行动。我查看了调试器并显示错误：

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找到1ms]

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

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>

---

修订app.js

我在 hashtagController $ ionicModal >但是据说错误：$ ionicModal未定义。还有什么地方未定义？

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


                                         }

                                     }]);

修改标签

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

推荐答案

离子模态与路线无关。

您只需从服务器加载一个静态html模板，同样的html以离子模态显示所有绑定。

You just load a static html template from server, and that same html is shown in ionic modal with all the bindings.

不是声明一个单独的控制器，而是在同一个控制器内移动：

Instead of declaring a seperate controller, move it inside the same controller :

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

Then in your 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>

这篇关于点击后如何打开Ionic Modal？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！