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

Question

我在单页应用程序的 View /内容部分之外的标题栏下拉列表中的简单登录表单上有两个按钮。表单上有两个按钮:

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

我的网站

    <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()"我可以确定按下了哪个按钮吗？

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 处理程序。

首先是 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);

};  
});

... 现在是指令。接下来，我使用指令处理任一按钮的点击。这样做的目的是让我识别按钮，并将其传递给 $scope。这实际上是练习的主要目的，但我意识到我现在可以将它绑定(bind)到我怀疑点击的任何地方并将一些数据传递到范围。

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