Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html ng-app="plunker">
- <head>
- <meta charset="utf-8" />
- <title>AngularJS Plunker</title>
- <script>
- document.write('<base href="' + document.location + '" />');
- </script>
- <link rel="stylesheet" href="style.css" />
- <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
- <script src="app.js"></script>
- </head>
- <body ng-controller="MainCtrl">
- <p>
- Form with directive:
- <br/>
- <tw-form tw-controller="ShopType" tw-action="AddShopType" method="post" target="_blank" enctype="multipart/form-data">
- <input type="file" id="shopTypeDllFile" name="shopTypeDllFile">
- <button type="submit" class="btn btn-primary ng-scope"> <i class="fa fa-plus"></i> Load...</button>
- </tw-form>
- </p>
- Form without directive:
- <br/>
- <form action="api/ShopType/AddShopType" tw-controller="ShopType" tw-action="AddShopType" method="post" target="_blank" enctype="multipart/form-data">
- <input type="file" id="shopTypeDllFile" name="shopTypeDllFile">
- <button type="submit" class="btn btn-primary ng-scope"> <i class="fa fa-plus"></i> Load...</button>
- </form>
- </body>
- </html>
- var app = angular.module('plunker', []);
- app.controller('MainCtrl', function($scope) {
- $scope.name = 'World';
- });
- app.directive('twForm', function() {
- return {
- restrict: 'E',
- template: '<form ng-transclude></form>',
- replace: true,
- transclude: true,
- scope: {
- twController: "@twController",
- twAction: "@twAction",
- },
- compile: function compile(tElement, tAttrs) {
- return function(scope, iElement, iAttrs) {
- var formTag = iElement;
- var encType = formTag.attr('enctype');
- if (encType === 'multipart/form-data') {
- // dont handle multipart as Ajax.
- formTag.attr('action', 'api/' + scope.twController + '/' + scope.twAction);
- formTag.removeAttr('ng-transclude');
- } else {
- //ajax form...
- formTag.on('submit', function(ev) {
- var url = 'api/' + scope.twController + '/' + scope.twAction;
- var method = formTag.attr('method');
- if (method == undefined)
- method = "GET";
- var successFunc = scope.twSuccess;
- var failFunc = scope.twFail;
- formTag.addClass('grayed-out');
- //formTag.find('input').attr('disabled', true);
- var p = $.ajax({
- method: method,
- url: url,
- data: formTag.serialize(),
- contentType: 'application/x-www-form-urlencoded; charset=utf-8',
- processData: true,
- jsonp: false
- });
- if (successFunc != undefined)
- p.done(function(res) {
- formTag.removeClass('grayed-out');
- successFunc({
- res: res
- });
- });
- if (failFunc != undefined)
- p.fail(function(res) {
- formTag.removeClass('grayed-out');
- failFunc({
- res: res
- });
- });
- event.preventDefault(); // dont submit the usual way.
- });
- }
- };
- }
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement