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

【问题标题】：Angular.js What is the best way to determine which button caused submit?Angular.js 确定哪个按钮导致提交的最佳方法是什么？
【发布时间】：2014-01-05 16:04:32
【问题描述】：

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

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

我的网站

    <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() { 返回 { 限制：“A”，链接：函数（范围，元素，属性）{

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

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

            });         
        }
    }
});

所以我的问题只是使用ng-submit="myfunction()"can i 确定按下了哪个按钮？

【问题讨论】：

从切线的角度来看，这似乎是令人困惑的 UI 设计。如果我是你，我会在视觉上将这两个动作分开。
我正在尝试新的东西。

标签： angularjs button directive

【解决方案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-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);
          });           
        }
    }
});

【讨论】：

【解决方案2】：

我不确定我是否正确理解了你的问题，但你可以根据

为每个 ng-submit 调用不同的函数，例如 ng-submit="myFunction1()" 和 ng-submit="myFunction2()"
您也可以使用参数ng-submit="myFunction(from)" 在上下文中进行相同的传递
您也可以传入特殊的$event 对象作为参数ng-submit="myFunction($event)"。该对象包含目标信息。

【讨论】：

我不明白答案。您只能在 <form> 标记处使用一个 ng-submit，除非您建议在按钮级别使用它。
对不起，我的意思是按钮级别，因为提交是在表单级别。我的错。

【解决方案3】：

您可以在 ng-click 中获取 $event 的句柄，并获取它的目标，然后获取它的 id，但我不建议它不是角度的做事方式：

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


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

【讨论】：

【解决方案4】：

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

例如，如果你有一个名为“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)}
}

【讨论】：