Angular.js确定哪个按钮导致提交的最佳方法是什么？

Question

我在单页面应用程序的视图/内容部分之外的标题栏上的下拉列表中有一个简单登录表单上的两个按钮。表单上有两个按钮：

编辑：两个按钮都需要提交表单，但我有两个不同的结果;一个是新会员注册，另一个是现有会员。我不想在多个部分处理这个问题。

我的主页

<div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"> 
      <a href="#/home">Home</a> 
     </li> 
     <li class="divider-vertical"></li> 
     <li> 
      <div class="btn-group btn-group-xs navbar-btn btn-pad"> 
      <a href="#" class="btn navbar-btn btn-default">NL</a> 
      <a href="#" class="btn navbar-btn btn-default">FR</a> 
      <a href="#" class="btn navbar-btn btn-default">EN</a> 
      </div> 
     </li> 
     <li class="divider-vertical"></li> 
     <!-- Begin Login Section --> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" href="#" data-toggle="dropdown">Signup/Login <strong class="caret"></strong></a> 
      <div class="dropdown-menu"> 
      <div class="accountForm"> 
       <!--form action="#" method="post" role="form"--> 
       <form name="loginForm" ng-submit="login()" ng-controller="homeController"> 
       <div class="form-group"> 
        <label class="control-label" for="username">Username</label> 
        <input type="text" ng-model="credentials.username" name="username" class="form-control input-sm" placeholder="username" required/> 
       </div> 
       <div class="form-group"> 
        <label class="control-label" for="password">Password</label> 
        <input type="password" ng-model="credentials.password" name="password" class="form-control input-sm" placeholder="password" required/> 
       </div> 
       <div class="form-group"> 
        <label class="control-label" for="remember"> 
        <input type="checkbox" class"form-control" name="remember" value="1"/>Remember me</label> 
       </div> 
       <div class="form-group btn-group-justified"> 
        <div class="btn-group"> 
        <button button-id="join" type="submit" class="btn btn-default">New? Join us</button> 
        <input type="hidden" class="btn" /> 
        </div> 
        <div class="btn-group inline"> 
        <input type="hidden" class="btn" /> 
        <button button-id="login" type="submit" class="btn btn-primary active">Log in</button> 
        </div> 
       </div> 
       </form> 
      </div> 
      </div> 
     </li> 
     <!-- End Login Section --> 
     </ul> 
    </div> 
    <!--/.nav-collapse --> 
    </div> 
</div> 
<div id="page" ng-view> 

第一个按钮的目的是向用户发送的登录过程（如果已经注册），第二个按钮是新的用户注册。

我的问题是，如果我使用<form ng-submit="myFunction()">指令，我还没有找到一种方法来确定按下按钮。

我也可以创建自己的指令，在那里我可以确定被按下的按钮，但这似乎是相当多的编码工作，而且这真的是角度的方式吗？

app.directive（ 'buttonId'，函数（）{ 回报{ 限制： “A”， 链接：功能（范围，元素，属性）{

  element.bind("click", function(){ 
       // when attributes.buttonId = 'join' 
//call the create script 

       // when attributes.buttonId = 'login' 
//call the authenticate script 

      });   
     } 
    } 
}); 

所以我的问题是根本使用ng-submit="myfunction()"我可以判断哪个按钮被按下？

Answer 1

我知道我回答我的问题，但是这似乎是“正确”的方式做到这一点：

<form name="loginForm" ng-submit="login()" ng-controller="homeController"> 
<div class="form-group btn-group-justified"> 
    <div class="btn-group"> 
    <button type="submit" class="btn btn-default" button-id="join">New?Joinus</button> 
     <input type="hidden" class="btn" /> 
    </div> 
    <div class="btn-group inline"> 
    <input type="hidden" class="btn" /> 
     <button type="submit" class="btn btn-primary active" button-id="login">Log in</button> 
    </div> 
</div> 
</form≥ 

以上是我感兴趣的形式的部分请注意，两个按钮都有type="submit"而不是type="button"。这很重要，原因有两个：

1）当您单击按钮时，您可以使用标准HTML5表单验证选项 2）它会强制ng-submit处理程序。

首先控制器

app.controller('homeController', function($scope){ 
$scope.buttons = { chosen: "" }; 

$scope.login = function(){ 
// can get the button that was clicked as it is now added to the scope 
    // by the directive 
alert($scope.buttons.chosen); 

}; 
}); 

...现在的指令。 接下来我使用指令处理任一按钮上的单击。这样做的目的是让我识别按钮，并将其传递给$scope。这实际上是锻炼的主要目的，但是我意识到现在我可以将其绑定到任何我怀疑有点击并将一些数据传递给范围的地方。

app.directive('buttonId', function() { 
    return { 
    restrict: "A", 
    link: function(scope, element, attributes) { 
        element.bind("click", function(){ 
      // able to get the name of the button and pass it to the $scope 
      // this is executed on every click 
      scope.buttons.chosen = attributes.buttonId; 
      // alert(attributes.buttonId + scope.buttons.chosen); 
      });   
     } 
    } 
}); 

Answer 2

我不知道如果我明白你的问题正确的，但你可以鉴别基于

• 呼唤每个不同的功能NG提交如ng-submit="myFunction1()"和ng-submit="myFunction2()"
• 您也可以使用参数ng-submit="myFunction(from)"
• 您还可以在特殊$event对象传递为参数ng-submit="myFunction($event)"做同样的传球在上下文中。该对象包含目标信息。

Answer 3

另一种方法是为该按钮设置属性脏，然后检查哪个按钮是脏的。

例如，如果你有一个表格名为“myForm的”你可以写这样的事情：

<form name="myForm" id="myForm" ng-submit="save()" ng-model="myForm" novalidate> 
    <input type="submit" name="save" ng-model="btnSave" ng-click="(frmForm.save.$setDirty())" /> 
    <input type="submit" name="saveOut" ng-model="btnSaveOut" ng-click="(frmForm.saveOut.$setDirty())" /> 
</form> 

在JavaScript文件，你可以处理它：

if ($scope.btnSave.$dirty){ 
    alert("First was clicked)} 
else{ 
    alert("First was clicked)} 
} 

Answer 4

你可以得到一个手柄在你的NG点击$事件，并得到它的目标，然后得到它的ID，但我不会建议，这不是角度的做事方式：

<input type="submit" id="test" data-ng-click="showAlert($event)"> 
    Click Me 
</button> 


$scope.showAlert = function(event){ 
    alert(event.target.id); 
}