ng-click 不适用于我的 ionic 应用程序答案

【问题标题】：ng-click won't work on my ionic appsng-click 不适用于我的 ionic 应用程序
【发布时间】：2017-08-04 16:03:49
【问题描述】：

这是我的 HTML 文件

 <ion-header>
  <ion-navbar>
    <ion-title>
      Booking
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<div class="tab">
  <ion-segment [(ngModel)]="flightType">
    <ion-segment-button value="one-way" (click)="changeStatus('0')" onclick="changeStatus()">
      <ion-icon name="arrow-forward"></ion-icon>
      One Way
      </ion-segment-button>
    <ion-segment-button value="round-trip" (click)="changeStatus('1')" onclick="changeStatus()">
      <ion-icon name="swap"></ion-icon>
      Round Trip
    </ion-segment-button>
  </ion-segment>
</div>
<div>
  <form>
    <ion-list style="margin-bottom: 0px;">
      <ion-item>
        <ion-label floating>Departure</ion-label>
        <ion-select [(ngModel)]="departure" [ngModelOptions]="{standalone:true}">
          <ion-option value="BDO">Bandung (BDO)</ion-option>
          <ion-option value="CGK">Jakarta (CGK)</ion-option>
        </ion-select>
      </ion-item>
    </ion-list>

    <ion-list style="margin-bottom: 0px;">
      <ion-item>
        <ion-label floating>Arrival</ion-label>
        <ion-select [(ngModel)]="arrival" [ngModelOptions]="{standalone:true}">
          <ion-option value="BDO">Bandung (BDO)</ion-option>
          <ion-option value="CGK">Jakarta (CGK)</ion-option>
        </ion-select>
      </ion-item>
    </ion-list>

    <ion-item style="min-height: 1rem;" no-lines id="departureDate">
      <ion-label floating>Departure Date</ion-label>
      <ion-datetime displayFormat="DD MMMM YYYY" pickerFormat="DD MM YYYY" [(ngModel)]="departureDate" [ngModelOptions]="{standalone:true}"></ion-datetime>
    </ion-item>

    <div [ngSwitch]="flightType">
      <ion-item  no-lines id="arrivalDate" *ngSwitchCase="'round-trip'">
        <ion-label floating>Arrival Date</ion-label>
        <ion-datetime displayFormat="DD MMMM YYYY" pickerFormat="DD MM YYYY" [(ngModel)]="arrivalDate" [ngModelOptions]="{standalone:true}"></ion-datetime>
      </ion-item>
    </div>

    <ion-item style="margin-bottom: 10px;" no-lines (click)="passengerModal()">
      <ion-label>Passenger</ion-label>
      <ion-input [innerHTML]="passengerQty"></ion-input>
    </ion-item>
      <button  ion-button  style="width: 100%; margin-bottom: 15px;" ng-click="submit()" >
            Search
      </button>
  </form>
</div>
</ion-content>

这是我的 script.js 文件

   var app = angular.module('booking', ['ionic'])
        app.controller('BookingCtrl', function($scope) {
            $scope.submit = function(){
                 console.log("test");
            }
        })

    $(document).ready(function(){

      $("#showPromoDescription").click(function(){

        alert("test");
      });

    });

我在纯 HTML 文件上尝试了这段代码，它运行良好。我尝试了离子，控制台上没有任何显示。我在我的模块上添加了“离子”，但它给了我注入器 modulerr 错误。我在 index.html 上使用 angular.min.js 而不是 ionic.bundle.js，因为它破坏了我的 CSS。有人可以帮我吗？

【问题讨论】：

标签： javascript html angularjs ionic-framework

【解决方案1】：

它现在可以工作了

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link href="css/style.css" rel="stylesheet">

    <link rel="stylesheet" href="css/jquery-ui.css">

    <!-- <link href="https://file.myfontastic.com/7G3SsmFcdcFV96xi2SKCq9/icons.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="css/icons.css" > 

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  </head>

  <body ng-app="booking" ng-controller="BookingCtrl">

<ion-content padding>
<div class="tab">
  <ion-segment [(ngModel)]="flightType">
    <ion-segment-button value="one-way" (click)="changeStatus('0')" onclick="changeStatus()">
      <ion-icon name="arrow-forward"></ion-icon>
      One Way
      </ion-segment-button>
    <ion-segment-button value="round-trip" (click)="changeStatus('1')" onclick="changeStatus()">
      <ion-icon name="swap"></ion-icon>
      Round Trip
    </ion-segment-button>
  </ion-segment>
</div>
<div>
  <form>
    <ion-list style="margin-bottom: 0px;">
      <ion-item>
        <ion-label floating>Departure</ion-label>
        <ion-select [(ngModel)]="departure" [ngModelOptions]="{standalone:true}">
          <ion-option value="BDO">Bandung (BDO)</ion-option>
          <ion-option value="CGK">Jakarta (CGK)</ion-option>
        </ion-select>
      </ion-item>
    </ion-list>

    <ion-list style="margin-bottom: 0px;">
      <ion-item>
        <ion-label floating>Arrival</ion-label>
        <ion-select [(ngModel)]="arrival" [ngModelOptions]="{standalone:true}">
          <ion-option value="BDO">Bandung (BDO)</ion-option>
          <ion-option value="CGK">Jakarta (CGK)</ion-option>
        </ion-select>
      </ion-item>
    </ion-list>

    <ion-item style="min-height: 1rem;" no-lines id="departureDate">
      <ion-label floating>Departure Date</ion-label>
      <ion-datetime displayFormat="DD MMMM YYYY" pickerFormat="DD MM YYYY" [(ngModel)]="departureDate" [ngModelOptions]="{standalone:true}"></ion-datetime>
    </ion-item>

    <div [ngSwitch]="flightType">
      <ion-item  no-lines id="arrivalDate" *ngSwitchCase="'round-trip'">
        <ion-label floating>Arrival Date</ion-label>
        <ion-datetime displayFormat="DD MMMM YYYY" pickerFormat="DD MM YYYY" [(ngModel)]="arrivalDate" [ngModelOptions]="{standalone:true}"></ion-datetime>
      </ion-item>
    </div>

    <ion-item style="margin-bottom: 10px;" no-lines (click)="passengerModal()">
      <ion-label>Passenger</ion-label>
      <ion-input [innerHTML]="passengerQty"></ion-input>
    </ion-item>
      <button  ion-button  style="width: 100%; margin-bottom: 15px;" ng-click="submit()" >
            Search
      </button>
  </form>
</div>
</ion-content>
</body>
</html>

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
//var app = angular.module('starter', ['ionic', 'ui.router','ngMaterial','ngCordova', 'ngMessages', 'material.svgAssetsCache','pr.longpress'])
var app = angular.module('booking', ['ionic', 'ui.router'])
app.run(function($ionicPlatform) {

  $ionicPlatform.ready(function() {

      if (window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);

    }

    if (window.StatusBar) {
      StatusBar.styleDefault();
    }

    $("#showPromoDescription").click(function(){
        alert("test");
      });

  });

});


var app = angular.module('booking', ['ionic'])
  app.controller('BookingCtrl', function($scope) {

  $scope.submit = function(){
    console.log("test");
  }

})

【讨论】：

还是不行。如果重要的话，我使用的是来自谷歌的 angular.min.js 而不是 ionic.bundle.js。
您遇到了什么错误，在控制台中查看并告诉我
开发服务器记录器已关闭。Angular 正在开发模式下运行。调用 enableProdMode() 以启用生产模式。 Native：尝试调用 StatusBar.styleDefault，但 Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行。 Native：尝试调用 SplashScreen.hide，但 Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行。按下按钮时没有错误
我收到了这个错误 [$injector:modulerr] errors.angularjs.org/1.6.4/$injector/modulerr
是的，您需要注入 'ionic'，添加此代码并告诉我是否有任何错误