NG-点击不会对我的离子应用

工作，这是我的HTML文件NG-点击不会对我的离子应用

<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。有人能帮我吗？

来源

2017-08-04 Rhesa Jonathan

它现在

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

})

来源

2017-08-04 04:05:40

仍然无法正常工作。我使用谷歌angular.min.js而不是ionic.bundle.js，如果这很重要。 –

你得到了什么错误，在控制台中看到并让我知道 –

开发服务器记录器closed.Angular正在开发模式下运行。调用enableProdMode（）以启用生产模式。原生：尝试调用StatusBar.styleDefault，但Cordova不可用。确保包含cordova.js或运行在设备/模拟器中。原生：尝试调用SplashScreen.hide，但Cordova不可用。确保包含cordova.js或运行在设备/模拟器中。没有错误，当我按下按钮 –

NG-点击不会对我的离子应用

回答

相关问题