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> 

ドキュメントから：私たちはdisabled内補間を使用することはできませんので

NG-無効

特別なディレクティブが必要です属性。詳細は、interpolation guideを参照してください。

— AngularJS ng-disabled Directive API Reference