Question

我只是想跟着这个example。这是我的代码：

angular.module('starter.controllers', [])
    .controller('PaymentListCtrl', function ($scope,$ionicModal,$timeout) {
        $scope.firstName = "John";
        $scope.productItems = [
            {
                name: 'Product 1',
                price: '$50.00'
            },
            {
                name: 'Product 2',
                price: '$45.00'
            }
        ];
        $scope.message = 'Everyone come and see how good I look!';

        $ionicModal.fromTemplateUrl('modal_transaction_code.html', {
            scope: $scope,
            animation: 'slide-in-up'
        }).then(function(modal) {
            $scope.modal = modal
        })

        $scope.openModal = function() {
            $scope.modal.show()
        }

        $scope.closeModal = function() {
            $scope.modal.hide();
        };

        $scope.$on('$destroy', function() {
            $scope.modal.remove();
        });
    });

模态表格

<label class="item item-radio" id="hashtagRadio" ng-controller="PaymentListCtrl">
    <input type="radio" name="settings-group" value="search">
    <div class="item-content">
        <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">MODAL FORM</span>
    </div>
    <i class="radio-icon ion-checkmark"></i>
</label>

Answer 1

简单..！

<body ng-app="starter" ng-controller="PaymentListCtrl">
<ion-pane>
  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>
  <ion-content>
    <button
            class="button button-full button-assertive"
            style = "margin-top: 0px;"
            ng-click = "openModal()">
      Open modal
    </button>
  </ion-content>
</ion-pane>
</body>
</html>

<script id="modal_transaction_code.html" type="text/ng-template">
 <ion-modal-view class="mdx-modal" >
<ion-header-bar class="dark">
  <div class="title text-center">Hola</div>
  <button class="button button-clear ion-close" ng-click="closeModal()"></button>
</ion-header-bar>
<ion-view>
  <ion-content class=" content-stable" >
    <label class="item item-radio"  >
      <input type="radio" name="settings-group" value="search">
      <div class="item-content">
          <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span >MODAL FORM</span>
            </div>
          <i class="radio-icon ion-checkmark"></i>
       </label>
     </ion-content>
   </ion-view>
  </ion-modal-view>
</script>

请确保，上面的代码保留在同一个.html文件中和PaymentListCtrl控制器代码是对的..！

希望你能成功..！

离子：尝试打开模态窗体时可以准备好属性“显示”错误

1 个答案: