#submitit

問題在於，有加上 action 屬性的 <form> 元素只有在直接被使用者操作的情況下才能夠成功送出。

於是我們還是會碰到 AngularJS natively 提供的 solution 無法解決的問題：

需要先與後端確認資料正確性之後再送出 - 無直接操作送出的動作

需要送出隱藏的 <form> - 無法透過使用者操作

過往我們怎麼做的？在 AngularJS 裡我們又該何去何從呢？

// jquery way $('form')[0].submit() // angular way? // $document injectable $document.find('form')[0].submit(); // $element injectable $element.find('form')[0].submit();

這樣當然不是好的做法！

Controller 裡面不要做 DOM 操作

如果純靠 jQLite 的 selector 能力(即不使用 jQuery)，頁面上有多個 <form> 的時候使用起來是相對難以選擇到真正的目標(因為 jqLite 的 selector 只支援 tag)

directive: submit-it

angular.module('submitIt', []) /** * @ngdoc directive * @description form submission trigger * * @param {boolean} submit-it submit form on `true` * @param {string} si-action submit action(optional) * @param {string} si-method submit method(optional) */ .directive('submitIt', [ '$timeout', function ($timeout) { return { restrict: 'A', link: function postLink(scope, iElm, iAttrs) { var _submitWatch = scope.$watch(iAttrs.submitIt, _onSubmitWatch), _savedAction, _savedMethod; iAttrs.$observe('siAction', function (val) { if (val) { _savedAction = val; } }); iAttrs.$observe('siMethod', function (val) { if (val) { _savedMethod = val; } }); function _onSubmitWatch(submit) { if (submit && iElm[0].tagName === 'FORM') { if (_savedAction) { iElm.attr('action', _savedAction); } if (_savedMethod) { iElm.attr('method', _savedMethod); } $timeout(function () { iElm[0].submit(); }); _submitWatch(); } } } }; }]);

用法

submit-it 本身做為「送出 <form>」的觸發器，其值為 true 時即會送出 <form>

附加的 si-action、si-method 則是提供了於送出 <form> 前的瞬間設定 <form> 的 action 及 method 的功能

Demo