Question

我想在按钮点击时打开模态视图。

这是我的html页面，我有我的按钮，当我点击这个按钮时，我想打开模态视图，我在单独的html文件中。

<ion-view >
<ion-content>
<div id="map" data-tap-disabled="true"></div>
<div id = "map-list" >
 <button ng-click="modal.show()">show modal</button>
</div>
</ion-content>
</ion-view>

这是我的模态html代码。

    <ion-modal-view>
    <ion-header-bar class="bar bar-header bar-positive">
      <h1 class="title">New Contact</h1>
      <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
    </ion-header-bar>
    <ion-content class="padding">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">First Name</span>
          <input ng-model="newUser.firstName" type="text">
        </label>
        <label class="item item-input">
          <span class="input-label">Last Name</span>
          <input ng-model="newUser.lastName" type="text">
        </label>
        <label class="item item-input">
          <span class="input-label">Email</span>
          <input ng-model="newUser.email" type="text">
        </label>
        <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
      </div>
    </ion-content>
  </ion-modal-view>

它不起作用。我应该在控制器中添加任何功能吗？请给我建议。

Answer 1

试试这个

<ion-modal-view id="myView">
    <ion-header-bar class="bar bar-header bar-positive">
      <h1 class="title">New Contact</h1>
      <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
    </ion-header-bar>
    <ion-content class="padding">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">First Name</span>
          <input ng-model="newUser.firstName" type="text">
        </label>
        <label class="item item-input">
          <span class="input-label">Last Name</span>
          <input ng-model="newUser.lastName" type="text">
        </label>
        <label class="item item-input">
          <span class="input-label">Email</span>
          <input ng-model="newUser.email" type="text">
        </label>
        <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
      </div>
    </ion-content>
  </ion-modal-view>

在控制器中

$scope.showModal = function(){
  var msgBoxSmall = angular.element('#myView');
    msgBoxSmall.modal('show');
}

在Html中

<ion-view >
<ion-content>
<div id="map" data-tap-disabled="true"></div>
<div id = "map-list" >
 <button ng-click="showModal ()">show modal</button>
</div>
</ion-content>
</ion-view>

如何在按钮点击时打开模态视图？

1 个答案: