<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
<script src="app.js"></script>
<script src="submitIt.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container text-center">
<p> </p>
<button class="btn btn-primary" ng-click="submit = true">Take me to Google.com</button>
</div>
<form target="_top" submit-it="submit" si-method="get" si-action="http://www.google.com"></form>
</body>
</html>
var app = angular.module('MyApp', ['submitIt']);
app.controller('MainCtrl', function($scope) {
// nothing here
});
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();
}
}
}
};
}]);