角度控制器中的功能不起作用

时间:2016-12-15 16:50:34

标签: javascript html angularjs

1.我想从connection.html获取信息,以便在函数doLogin中使用它们 没有错误消息,控制台向我发送消息“thing hapen Object {}”,显示控制器已初始化但当我点击按钮时没有任何反应。

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'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic','starter.controllers','starter.routes'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

controller.js

    angular.module('starter.controllers', ['starter.routes'])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

})

.controller('connection', function($scope, $ionicModal, $timeout) 
{

  $scope.loginData = {};
  console.log('things hapen', $scope.loginData);


  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    if ($scope.loginData.mail.length != 0 && $scope.loginData.password.length!= 0) 
    {

      $timeout(function() 
        {
          $ionicPopup.alert
          ({
            title: 'timeout',
            template: 'verifier votre connection ou essayer plus tard'
          });
        }, 1000);
    }
    else
    {      
      $ionicPopup.alert(
       {
         title: 'Champs vide',
         template: 'rempplissez les champs et réessayer'
       });
    }


  };
})


.controller('browseController', function($scope, $http) {

    $scope.getData = function() {
        $http.get("http://pocapi-test.apigee.net/organisateur", { params: { "key1": "value1", "key2": "value2" } })
            .success(function(data) 
            {
                console.log('data get', data);
                data = data[0];
                console.log('data get 2', data);
                $scope.data = data;
                $scope.nom = data.nom;
                $scope.logo = data.logo;
                console.log('data get 3', data.nom, data.logo);
            })
            .error(function(data) {
                alert("ERROR");
            });
    }

});

routes.js

    angular.module('starter.routes', [])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.browse', {
      url: '/browse',
      views: {
        'menuContent': {
          templateUrl: 'templates/browse.html'

        }
      }
    })

  .state('app.connection', {
      url: '/connection',
      views: {
        'menuContent': {
          templateUrl: 'templates/connection.html'

        }
      }
    })

  .state('app.CreationCompte', {
      url: '/CreationCompte',
      views: {
        'menuContent': {
          templateUrl: 'templates/CreationCompte.html'

        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/connection');
});

connection.html

    <ion-view title="Profil">
  <ion-content padding="true" class="has-header" ng-controller ='connection'>
    <form class="list">
      <ion-list>
        <label class="item item-input">
          <span class="input-label">
            Email
          </span>
          <input placeholder="demonstration@email.fr" type="email" ng-model="loginData.mail">
        </label>
        <label class="item item-input">
          <span class="input-label">
            Mot de passe
          </span>
          <input type="password" ng-model="loginData.password">
        </label>
      </ion-list>
      <div class="spacer" style="height: 40px;"></div>
      <a class="button button-balanced  button-block" type="submit"  ng-submit="doLogin()">
        Se connecter
      </a>
      <a style="font-size:13px;" class="button button-positive  button-block button-clear" >
        Mot de passe oublié ?
      </a>
    </form>
    <div>
  </ion-content>
</ion-view>

1 个答案:

答案 0 :(得分:0)

您应该使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="hex" /> <input type="button" id="btn" />

上的ng-submit
form

您应该有<form class="list" ng-submit="doLogin()"> 提交效果,而不是button元素

<a>