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

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

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()">, я еще не нашел способ определить нажатую кнопку.

В качестве альтернативы я могу создать свою собственную директиву, в которой я могу определить, какая кнопка была нажата, но по сравнению с этим кажется, что это требует больших усилий по кодированию, и действительно ли это способ Angular?

app.directive ('buttonId', function () { return { ограничить: «A», ссылка: функция (область, элемент, атрибуты) {

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

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

            });         
        }
    }
});

Итак, мой вопрос просто с помощью ng-submit="myfunction()"можно ли определить, какая кнопка была нажата?


button angularjs directive
person T9b    schedule 05.01.2014    source источник
comment
Кстати, это похоже на запутанный дизайн пользовательского интерфейса. На вашем месте я бы визуально разделил эти два действия.   -  person jessegavin    schedule 06.01.2014
comment
Я пробую что-то новое.   -  person T9b    schedule 06.01.2014

Ответы (4)


arrow_upward
4
arrow_downward

Я знаю, что отвечаю на свой вопрос, но это кажется "правильным" способом сделать это:

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

Сначала контроллер

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);
          });           
        }
    }
});
person T9b    schedule 09.01.2014

arrow_upward
1
arrow_downward

Я не уверен, правильно ли я понял вашу проблему, но вы можете дифференцировать на основе

  • Вызов разных функций для каждого ng-submit, например ng-submit="myFunction1()" и ng-submit="myFunction2()"
  • Вы также можете сделать то же самое в контексте, используя параметр ng-submit="myFunction(from)"
  • Вы также можете передать специальный объект $event в качестве параметра ng-submit="myFunction($event)". Этот объект содержит целевую информацию.
person Chandermani    schedule 05.01.2014
comment
Я не понимаю ответа. Вы можете использовать только один ng-submit в теге <form>, если только вы не предлагаете использовать его на уровне кнопки. - person T9b; 06.01.2014
comment
Извините, я тоже имел в виду на уровне кнопки, поскольку отправка находится на уровне формы. Виноват. - person Chandermani; 06.01.2014

arrow_upward
1
arrow_downward

Вы можете получить дескриптор $event в своем ng-click и получить его цель, а затем получить его идентификатор, но я бы не рекомендовал, чтобы это не угловой способ ведения дел:

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


$scope.showAlert = function(event){
    alert(event.target.id);
}
person Rahi.Shah    schedule 12.10.2017

arrow_upward
0
arrow_downward

Другой способ — установить свойство dirty для этой кнопки, а затем проверить, какая из кнопок грязная.

Например, если у вас есть форма с именем «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)}
}
person Tuvia Khusid    schedule 17.08.2015