如何使用angularjs或jquery将每个单击的按钮动作保存在json文件/对象中？

Question

I wanted to save each and every button action(for ng-clicked and non-ng-clicked including file uploads/urls ie whatever I click, that button should be stored in json file/object ie for all <input type="button"> in my case.) in my json file/object using either angularjs or jquery ? How can I do it ? Created Fiddle ,Please help me. Thanks in advance.

html:

Answer 1

You can add global beforeSend handler using:

$.ajaxSetup({
  beforeSend: function(jqXHR, settings) {
    var data = {
       url: settings.url,
       data: settings.data
    };
    $.ajax({url: 'save_json.php', data: data, beforeSend: $.noop);
  }
});

This will work only for ajax requests, if you want to log form submit you will need to add global submit handler:

$('body').on('submit', 'form', function(e) {
  var $target = $(e.target);
  $.ajax({
    url: 'save_json.php',
    data: {url: $target.attr('action')},
    beforeSend: $.noop, 
    sucess: function() {
      $target.submit(function(e) {
        // prevent global handler
        e.stopPropagation();
      }).submit();
    }
  });
  return false;
});

Answer 2

Set click listener on the form element.

$('#formid').click(function (e) {
    //e.target will give the element clicked inside the form
});

Check if the e.target is a button element and save the button in your json file/object.

Answer 3

I think the most angular-way of achieving this is to create a directive and use this directive instead of <input type="button"> I created a sample;

var actionLogs = [];

yourModule.directive("actionButton", [function () {
return {
    scope: {
        action: '&',
        type: '@'
    },
    restrict: 'E',
    replace: true,
    transclude: true,
    controller: function ($scope, $element) {

        var logClickEvent = function ($event) {
            var log = {element: $element, action: $scope.action, clickTime: new Date()};
            actionLogs.push(log);
        };

        $scope.doAction = function ($event) {

            //** Do whatever you want here before every action
            logClickEvent($event);

            $scope.action.apply(null, []);
        };
    },
    link: function (scope, element, attrs) {
        if (typeof attrs.type === "undefined") {
            scope.type = "button";
        }
    },
    template: '<input type="{{type}}" ng-click="doAction($event)"><span ng-transclude></span></input>'
};
}]);

You can use <action-button action="yourNgClickFunc()"> instead of <input type="button" ng-click="yourNgClickFunc()"> and your clicks will be logged in the array actionLogs .

In some cases you may want to log click events other then <input type="button"> s. Then I prefer to use an attribute directive instead of element directive, for example;

var actionLogs  = [];

yourModule.directive("loggable", [function () {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {

        element.click(function (e) {
            var action = scope[attrs.ngClick.split("(")[0]];
            var log = {element: element, action: action, clickTime: new Date()};
            actionLogs.push(log);
        });

    }
};
}]);

You can use <input type="button" ng-click="yourNgClickFunc()" loggable> instead of <action-button> and your clicks still will be logged in the array actionLogs