Question

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

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

我的网站

    <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”， link：function（范围，元素，属性）{

            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调用不同的功能，例如ng-submit="myFunction1()"和ng-submit="myFunction2()"
您还可以使用参数ng-submit="myFunction(from)"
您还可以将特殊$event对象作为参数ng-submit="myFunction($event)"传递。该对象包含目标信息。

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

Answer 4

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

例如，如果你有一个名为＆＃34; myForm＆＃34;你可以这样写：

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

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

4 个答案: