Question

我的范围功能“login（）”在用户输入“ng-click”时不起作用，为什么不起作用？请帮忙！

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


    };



  }])

这就是形式：

 <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，因此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);
}

<强>样本

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>

AngularJS - 功能不适用于ng-click

2 个答案: