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