Discover Top Posts Tagged with #submitit

Programmatical form submission

AngularJS 做為一個以建立 Single Page App 為目標的 framework，當然是不希望你在 web app 中碰到需要與後端做資料溝通時會需要 refresh 整個網頁，因此它提供了完整的 HTML <form> 解決方案，諸如：

透過 form directive 攔截預設的 form submission

多樣化而且可以自訂的 validation 功能

提供 ng-submit 以及 [type="submit"] 上的 ng-click 作為真正送出 form 時候的程式動作

問題

然而，我們不時的還是會碰到真正需要 page refresh 的 form submission

該功能還沒有做 API 的時候（容易發生在從 backend-based 轉移成為 SPA 的時候）

介接第三方網站功能的時候（例如金流業者）

貼心如 AngularJS，當然也理解你的困難，於是

Angular prevents the default action (form submission to the server) unless the <form> element has an action attribute specified.

可惜天下的事情通常都不會如此順利(蛤)。

問題在於，有加上 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

在這個 demo 中可以看到該按鈕其實沒有擺在 <form> 裡面，並且點擊後直接對 http://www.google.com 發出了 GET request，又由於 target 為 _top，整頁都將被導至 http://www.google.com。

#submitit

Trending Tags

Recently Viewed Tags

#submitit