Question

这是我的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文件上尝试了这个代码，它运行得很好。我试过离子，没有任何东西出现在控制台上。我添加了'离子＆＃39;在我的模块上，但它给了我注射器modulerr错误。我在index.html而不是ionic.bundle.js上使用angular.min.js，因为它破坏了我的CSS。有人能帮助我吗？

Answer 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");
  }

})

ng-click对我的离子应用程序

1 个答案: