点击后如何打开离子模态？

Question

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

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

我添加了一个$ionicModal,hashtagController但据说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>

Answer 1

离子模态与路线无关.

您只需从服务器加载一个静态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>

Answer 2

Ionic有一个很好的codepen示例,展示了如何打开一个模态 ng-click

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