angularjs 自定义按钮指令提交不同的表单

Question

我创建了一个样式化的按钮指令。我只想要包含在里面的按钮提交表单。

angular.module('app')
.directive('gpButton', function () {
    return {
        templateUrl: "views/directives/components/button.html",
        restrict: "E",
        scope: {
            type: '@',
            background: '@'
        },
        transclude: true,
        controllerAs: "vm",
        bindToController: true,
        controller: [function() {
            var vm = this;
        }]
    };
});

这是我的 button.html 文件；

<button class="button"
    type="{{vm.type === 'submit' ? 'submit' : 'button'}}"
    ng-disabled="{{vm.disabled ? true : false}}"
    ng-style="{'background': vm.background}">
<ng-transclude></ng-transclude>
</button>

而我的表格将是这样的，

     <form name="individualLoginForm" ng-submit="vm.submitIndLogin()">
       <div class="form-group" style="margin-bottom: 100px;">
           <gp-input type="tel"
                     autofocus="true"
                     autocomplete="off"
                     phone-input="true"
                     ng-model="vm.loginPhoneNumber"
                     label="{{'GSM_NUMBER' | translate}}"
                     icon-class="gp-icon icon-phone"
                     disabled="vm.firstFormSubmitted"
                     required="true">
           </gp-input>
        </div>
        <gp-button type="submit" ---> here is my custom submit button
                   background="#E57373">
         Login
        </gp-button>
    </form>

但是它只是在刷新页面时提交，如果我去另一条路线然后回来它不是提交表单。包含在任何<form></form>?

中的提交我该怎么办？

Answer 1

从 ng-disabled 指令中删除插值 {{ }}：

<button class="button"
    type="{{vm.type === 'submit' ? 'submit' : 'button'}}"
    ̶n̶g̶-̶d̶i̶s̶a̶b̶l̶e̶d̶=̶"̶{̶{̶v̶m̶.̶d̶i̶s̶a̶b̶l̶e̶d̶ ̶?̶ ̶t̶r̶u̶e̶ ̶:̶ ̶f̶a̶l̶s̶e̶}̶}̶"̶
    ng-disabled="vm.disabled ? true : false"
    ng-style="{'background': vm.background}">
  <ng-transclude></ng-transclude>
</button>

来自文档：

ng-disabled

A special directive is necessary because we cannot use interpolation inside the disabled attribute. See the interpolation guide for more info.

— AngularJS ng-disabled Directive API Reference

angularjs 自定义按钮指令提交不同的表单

angularjs custom button directive submit different forms

angularjs

directive

ng-disabled