Question

我刚写了那个打开模态的简单按钮。在这个模态中，我放了一个＆＃34;关闭＆＃34;触发＆＃34; closeLogin（）＆＃34;的按钮功能很好。我在登录表单中创建一个啤酒按钮以启动＆＃34; doTestme（）＆＃34;功能但它永远不会启动。请参阅以下内容：

正确触发模态的按钮：

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Welcome">
    <ion-content class="padding">
      <button type="button" class="button" ng-click="login()">Log-in Test, click on the beer!</button>
    </ion-content>
  </ion-view>
</script>

＆＃34; MainCtrl＆＃34;处理$范围：

  .controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal, $timeout) {
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  $scope.doTestme = function() {
    alert("test ok");
  };

正确弹出的模式：

<script id="templates/login.html" type="text/ng-template">
<ion-modal-view>
  <ion-header-bar>
    <h1 class="title">Login</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeLogin()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form ng-submit="doLogin()">
      <div class="list">
    <label class="item item-input">
      <span class="input-label">Username</span>
      <input type="text" ng-model="loginData.username">
    </label>
    <label class="item item-input">
      <span class="input-label">Password</span>
      <input type="password" ng-model="loginData.password" style="-webkit-flex: 1 0 100px;"><button type="button" ng-click="doTestme()" class="button button-icon ion-beer" style="font-size:35px;"></button>
    </label>
    <label class="item">
      <button class="button button-block button-positive" type="submit">Log in</button>
    </label>
  </div>
</form>
  </ion-content>
</ion-modal-view>
</script>

好像从未观看过ng-click，我在控制台中没有任何错误，没有办法调试这个......任何想法？

以下是codepen：http://codepen.io/anon/pen/jEpNGB

Answer 1

你不应该在label内使用按钮。它将无法正常工作。只需将容器从<label>更改为<div>

即可

<div class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password" style="-webkit-flex: 1 0 100px;">
           <button type="button" ng-click="doTestme()" class="button button-icon ion-beer" style="font-size:35px;"></button>
        </div>

检查此工作codepen

Answer 2

在第一时间我尝试了两件事：

将功能更改为＆＃34; doAlert（）＆＃34;

将按钮更改为普通链接＆＃34;测试＆＃34;

它奏效了！但是在链接没有再发出警报框后几分钟。

我在CodePlen中尝试过。请在外面进行并发送反馈。

在表单模式中单击ng不会触发事件

2 个答案: