Angular.js What is the best way to determine which button caused submit?

angularjs, button, directive

Solution

I know I am answering my own question, but this seems to be the "correct" way to do this:

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

The above is the section of the form that I'm interested in. Note that both buttons have `type="submit"`and not `type="button"` . This is important for two reasons:

1) you can use the standard HTML5 form validation options when you click the buttons 2) it forces the `ng-submit`handler.

First the controller

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

};  
});

... and now the directive. Next I handle the click on either button using a directive. This has the purpose of allowing me to identify the button, and pass it to the `$scope`. This was actually the main purpose of the excercise, but I realised that I could now bind this to anything where I suspected a click and pass some data to the 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);
          });           
        }
    }
});

Problem

I have two buttons on a simple login form in a dropdown on a header bar that is outside of the view/content part of my single page app. There are two buttons on the form: EDIT: both buttons need to submit the form, but I have two different outcomes; one does new member sign-up, the other login existing members. I do not want to handle this on multiple partials. My Website ``` <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> ``` The first button is intended to send the user to the login process (if they are already registered) and the second button is for new users to register. The problem I have is that if I use the `<form ng-submit="myFunction()">` directive, I haven't yet found a way to determine the button that was pressed. I can alternatively create my own directive, where I can determine the button that was pressed, but this seems to be a lot of coding effort by comparison, and is this really the Angular way? app.directive('buttonId', function() { return { restrict: "A", link: function(scope, element, attributes) { ``` element.bind("click", function(){ // when attributes.buttonId = 'join' //call the create script // when attributes.buttonId = 'login' //call the authenticate script }); } } }); ``` So my question is simply using `ng-submit="myfunction()"`can i determine which button was pressed?

Original source