Question

目前我正在使用带角度的离子框架。以下是app.js，index.html

我无法访问index.html中的logInAsFarmer函数，如果我遗漏了某些内容，请告诉我。

// 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'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
      init();
    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();
    }
  });
})

.controller('MainController', ['$scope', '$ionicPopup',
        function($scope, $ionicPopup) {

            function init() {

            }

        $scope.logInAsFarmer = function() {
            alert('Called khuda');
        }

} ]);

的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 href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">



  </head>
  <body ng-app="starter"> 
      <div ng-controller="MainController">
      <button style= "margin-top:100px;margin-left:330px;height:40px;width:135px;"class="button button-balanced" ng-click="logInAsFarmer()">
                Farmer Login
            </button>
      </div-
<!--
<button style= "margin-top:100px;margin-left:330px;height:40px;width:135px;"class="button button-balanced" ngClick="logInAsFarmer()">
                Farmer Login
            </button>
-->
    <ion-pane  ng-controller="MainController">
        <div class="bar bar-header bar-balanced">
        <h1 class="title">hello</h1>
        </div>
        <div>

            <button style= "margin-top:10px;margin-left:330px"class="button button-balanced" ng-click="logInAsFarmer()">
                Merchant Login
            </button>
        </div>
       <div class="bar bar-footer bar-balanced">

      <ion-content>
      </ion-content>

    </ion-pane>
      <script src="lib/ionic/js/ionic.bundle.js"></script>
      <script src="lib/ionic/js/angular/angular.js"></script>
              <!-- cordova script (this will be a 404 during development) -->

    <!-- your app's js -->
    <script src="js/app.js"></script>

  </body>
</html>

Answer 1

我已经更好地格式化了代码并清除了一些无效的结束标记和重复的代码。

您有2个对主控制器的引用，我现在将其更改为1。

以此为出发点：

// 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'
angular.module('starter', ['ionic'])

.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();
    }
  });
})

.controller('MainController', ['$scope', '$ionicPopup',
  function($scope, $ionicPopup) {

    $scope.logInAsFarmer = function() {
      alert('Called khuda');
    }

  }
]);

<!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 href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

</head>

<body ng-app="starter">

  <div ng-controller="MainController">

    <ion-pane ng-controller="MainController">

      <div class="bar bar-header bar-balanced">
        <h1 class="title">hello</h1>
        <button class="button button-balanced" ng-click="logInAsFarmer()">
          Merchant Login
        </button>
      </div>

      <div class="bar bar-footer bar-balanced">
      </div>

      <ion-content>
      </ion-content>

    </ion-pane>

    <script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
    <link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet" />

</body>

</html>

如何使用有角度的离子

1 个答案: