Angular.js Каков наилучший способ определить, какая кнопка вызвала отправку?

Question

У меня есть две кнопки в простой форме входа в раскрывающемся списке на панели заголовка, которая находится за пределами области просмотра/содержимого моего приложения с одной страницей. На форме имеются две кнопки:

EDIT: Обе кнопки должны представить форму, но у меня есть два разных результата; один регистрируется новый участник, другие входящие в систему члены. Я не хочу обрабатывать это по нескольким частям.

Мой сайт

<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', функция() { возвращение { ограничения: "А", ссылка: функция (сфера, элемент, атрибуты) {

  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-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-клике и получить его цель, а затем получить его идентификатор, но я бы не рекомендовал, чтобы это не угловой способ делать вещи:

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


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