javascript - 从指令调用 ngSubmit

Question

您好，我有一个指令，可以在单击按钮时更改选项卡。我只想从指令内部调用 ngSubmit 进行表单验证。可能吗？

指令

angular.module 'myapp'
.directive 'nextButton', [() ->
  return {
    restrict: 'A'
    replace: true  
    transclude: false
    scope: {
      saveLocal: '&saveDataLocal'
      nextTab: '='
    }
    link: (scope, elem, attrs) -> 
      console.log scope.saveLocal
      elem.bind 'click', ()->
        console.log attrs
        scope.saveLocal 'app'
        angular.element('#'+scope.nextTab).trigger('click')
  }
]

我的 Jade 模板中的 html:

form#generalFormScc(name="form" ng-submit="saveForm(form, $event)")
  input(type='text', placeholder='Name', ng-model="name", required)
  button(next-button next-tab="'next'" save-data-local="ngSubmit" form-name="'generalFormScc'") Next

在这里，next-tab 是触发下一个选项卡的 id，save-data-local 应该触发 ngSubmit

我知道我可以直接从指令调用 saveForm() ，但我也想要默认的 html 验证。所以我想触发ngSubmit。

有什么办法吗？谢谢

Answer 1

我发现我可以获取表单的 id 并调用它的提交方法以供将来引用。

'use strict'

angular.module 'myApp'
.directive 'nextButton', [() ->
  return {
    restrict: 'A'
    replace: true  
    transclude: false
    scope: {
      saveLocal: '&saveDataLocal'
      nextTab: '='
      formName : '='
    }
    link: (scope, elem, attrs) -> 
      console.log scope.saveLocal
      elem.bind 'click', ()->
        angular.element('#'+scope.formName).submit()
        if not angular.element('#'+scope.formName).hasClass 'ng-invalid'
          angular.element('#'+scope.nextTab).trigger('click')
  }
]