AngularJS - 函数在 ng-click 上不起作用答案

【问题标题】：AngularJS - function not working on ng-clickAngularJS - 函数在 ng-click 上不起作用
【发布时间】：2017-04-15 18:58:00
【问题描述】：

当用户使用“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;
        });


    };



  }])

那是形式：

 <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>

【问题讨论】：

提供更具体的细节......“不工作”告诉我们几乎没有任何价值。花几分钟阅读How to Ask
尝试在控制器代码中更新以下内容。 $signin_email = $scope.member.email; $signin_password = $scope.member.password;
仍然不工作@BanshiL.Dangi
@Mr.Malaka 但是在$scope.login... 之前有$scope.member = {}; 行吗？如果没有，请尝试添加它。
@Mr.Malaka 将表单名称重命名为“userloginForm”，并将 $scope.member = {} 放在控制器中 $scope.login 方法之前。

标签： javascript html angularjs function controller

【解决方案1】：

尝试在login 函数中使用$scope.member.email 代替$scope.userloginForm.email.$modelValue 和$scope.member.password 代替$scope.userloginForm.password.$modelValue，因为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>

【讨论】：

我必须把 scope.member = {} 放在哪里？
@Mr.Malaka 在$scope.login... 前一行。
这样：$scope.member{ $scope.login = function() { ???
@Mr.Malaka 喜欢那个：$scope.member = {}; $scope.login...
对我不起作用 .. 在控制台上说在 scope.member{} 行中有一个意外的令牌；

【解决方案2】：

您可以直接将ng-model 对象作为login 函数中的参数传递，而不是使用$scope.userloginForm.email.$modelValue。

在 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>

【讨论】：