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>

来自Docs：

ng-disabled

特殊指令是必要的，因为我们不能在disabled属性中使用插值。有关更多信息，请参阅interpolation guide。

— AngularJS ng-disabled Directive API Reference