angularjs benutzerdefinierte Schaltfläche Anweisung senden verschiedene Formen

Question

Ich habe eine formatierte Schaltfläche Anweisung erstellt. Ich wollte nur das Formular zum Senden der Schaltfläche, das darin enthalten ist.

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

Und hier ist meine button.html Datei;

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

Und meint man die Form wie sein wird,

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

Aber es ist die Einreichung nur dann, wenn die die Seite zu aktualisieren, wenn ich auf dem anderen Weg gehen und nicht zurückkommen es Absenden das Formulars . Was soll ich für einreichen, was in einem <form></form> enthalten ist?

Answer 1

Entfernen Sie die Interpolation {{ }} aus der ng-disabled Richtlinie:

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

Aus dem Text & Tabellen:

ng-disabled

Eine spezielle Richtlinie ist notwendig, weil wir nicht Interpolation innerhalb der disabled verwenden können Attribut. Weitere Informationen finden Sie unter interpolation guide.

— AngularJS ng-disabled Directive API Reference