Angular 按钮正在调用表单提交按钮，原因不明

Question

我正在使用 Laravel，它使用 blade，并且我有一个包含表单的视图。我正在使用 blade 打开和关闭表单，并且在表单中我还使用 angular 在用户与之交互时更新部分表单。我在表单中有一个按钮可以触发 angular 控制器方法，但是一旦控制器方法获得运行，就会触发表单提交操作。我不明白为什么在单击 angular 按钮时会提交表单。你能帮忙吗？

这是我的Html（blade）：

{!! Form::open([$category = new \App\Category, 'url' => 'categories']) !!}
<div class="container" ng-app="catApp" ng-controller="catController">
    <div class="form-group">
        {!! Form::label('name', 'Name:') !!}
        {!! Form::text('name', null, ['class' => 'form-control']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('category_parent', 'Parent Category:') !!}
        {!! Form::select('category_parent', $categories, null, ['id' => 'category_list', 'class' => 'form-control']) !!}
    </div>

    <label for="singleSelect"> Single select: </label><br>
    <select name="singleSelect" ng-model="data.singleSelect" ng-options="cat.id as cat.name for cat in selectOptions" ng-change="change(data.singleSelect)">

    </select><br>
    <button ng-click="upOneLevel()">back</button>



    <tt>singleSelect = <%data.singleSelect%> </tt>

    <div class="form-group">
        {!! Form::submit($submitButtonText, ['class' => 'btn btn-primary form-control']) !!}    
    </div>
</div>
{!! Form::close() !!}

这是我的 angular 控制器：

function catController ($scope, commentFactory) {
    $scope.data = {
    singleSelect: null,
   };

   $scope.grandParentId = null;

   $scope.change = function ($parentId) {
    $scope.grandParentId = $scope.selectOptions[$parentId - 1].parent_id;
    commentFactory.get($parentId)
        .success(function(data) {
            $scope.selectOptions = data;
        });
   };

   $scope.upOneLevel = function() {
      commentFactory.get($scope.grandParentId)
        .success(function(data) {
            $scope.selectOptions = data;
        });
      $scope.grandParentId = $scope.selectOptions[$scope.grandParentId - 1].parent_id;
   };

   commentFactory.get(null)
        .success(function(data) {
            $scope.selectOptions = data;
        });
}

当我点击带有 ng-click 指令的按钮时，一旦执行了 upOneLevel，表单就会被提交。

Answer 1

使用 <input type="button"/> 代替按钮标签。 <button> 将隐式提交表单。

所以不用

<button ng-click="upOneLevel()">back</button>

尝试

<input type="button" value="back" ng-click="upOneLevel()"/>

Answer 2

澄清一下，没有 type 属性的 <button> 的默认行为是提交表单。要让它成为一个普通按钮而不提交只需添加 type="button" 像这样：

<button type="button" ng-click="upOneLevel()">back</button>

Angular 按钮正在调用表单提交按钮，原因不明

Angular button is calling form submit button for unknown reason

javascript

forms

angularjs

blade

laravel-5.1