AngularJS - 功能不支持ng-click

Question

当用户使用“ng-click”进入时，我的范围函数“login（）”不起作用，为什么不起作用？请帮忙！

HTML

<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login()" >Entrar</a> 

在控制器

.controller('loginCtrl', ['$scope', "Auth", '$state', 
function ($scope, Auth, $stateParams) { 

$scope.login = function() { 

    $signin_email = $scope.userloginForm.email.$modelValue; 
    $signin_password = $scope.userloginForm.password.$modelValue; 

    // sign in 
     Auth.$signInWithEmailAndPassword($signin_email, $signin_password) 
     .then(function(firebaseUser) { 
      //$scope.message = "User created with uid: " + firebaseUser.uid; 
      alert(firebaseUser.email + " logged in successfully!"); 
     }).catch(function(error) { 

      alert(error.message); 
      //$scope.error = error; 
     }); 


    }; 



    }]) 

Funcion即形式：

<form id="login-form1" name="$parent.userloginForm" class="list" > 
     <div class="spacer" style="height: 40px;"></div> 
     <ion-list id="login-list1"> 
     <label class="item item-input" id="login-input1"> 
      <span class="input-label">Email :</span> 
      <input type="text" name="email" ng-model="member.email" placeholder=""> 
     </label> 
     <label class="item item-input" id="login-input2"> 
      <span class="input-label">Senha :</span> 
      <input type="password" ng-model="member.password" placeholder=""> 
     </label> 
     </ion-list> 
     <div class="spacer" style="height: 40px;"></div> 
     <a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login()" >Entrar</a> 
     <a href-inappbrowser="/signup" id="login-button2" class="button button-positive button-block button-clear">Esqueceu sua senha?</a> 
    </form> 

Answer 1

尝试使用$scope.member.email而不是$scope.userloginForm.email.$modelValue和$scope.member.password，而不是$scope.userloginForm.password.$modelValue内login functi on，导致这个属性Angular从表单的输入中写入。当然，你的控制器的顶部，你应该有$scope.member = {}。另外，我认为你的表单的name应该是userloginForm，而不是$parent.userloginForm。还有一两件事 - 如果你没有，你不应该使用ng-click()提交表单，你应该ng-submit="login"表单上并<button id="login-button1" class="button button-assertive button-block icon-right ion-log-in type="submit">Entrar</button>

Answer 2

而不是使用$scope.userloginForm.email.$modelValue，你可以直接通过ng-model对象作为login参数功能。

在HTML：

<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login(member)" >Entrar</a> 

在控制器：

$scope.login = function(member) { 
    var signin_email = member.email; 
    var signin_password = member.password; 
    console.log(signin_email); 
    console.log(signin_password); 
} 

DEMO

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.login = function(member) { 
 
     var signin_email = member.email; 
 
     var signin_password = member.password; 
 
     console.log(signin_email); 
 
     console.log(signin_password); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <form id="login-form1" name="userloginForm" class="list" > 
 
     <div class="spacer" style="height: 40px;"></div> 
 
     <ion-list id="login-list1"> 
 
     <label class="item item-input" id="login-input1"> 
 
      <span class="input-label">Email :</span> 
 
      <input type="text" name="email" ng-model="member.email" placeholder=""> 
 
     </label> 
 
     <label class="item item-input" id="login-input2"> 
 
      <span class="input-label">Senha :</span> 
 
      <input type="password" ng-model="member.password" placeholder=""> 
 
     </label> 
 
     </ion-list> 
 
     <div class="spacer" style="height: 40px;"></div> 
 
     <a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login(member)" >Entrar</a> 
 
     <a href-inappbrowser="/signup" id="login-button2" class="button button-positive button-block button-clear">Esqueceu sua senha?</a> 
 
    </form> 
 
</div>