Question

我想保存每个按钮操作（对于ng-clicked和非ng-clicked包括文件上传/ url，即无论我点击什么，该按钮应该存储在json文件/对象中，即所有{{1}在我的情况下。）在我的json文件/对象中使用angularjs或jquery？我该怎么做？创建Fiddle，请帮助我。提前谢谢。

<input type="button">

Answer 1

您可以使用以下方法添加全局beforeSend处理程序：

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

这仅适用于ajax请求，如果要记录表单提交，则需要添加全局提交处理程序：

$('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

在表单元素上设置单击侦听器。

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

检查e.target是否为按钮元素，并将按钮保存在json文件/对象中。

Answer 3

我认为实现这一目标的最直接的方法是创建一个指令并使用此指令而不是<input type="button">我创建了一个示例;

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>'
};
}]);

您可以使用<action-button action="yourNgClickFunc()">代替<input type="button" ng-click="yourNgClickFunc()">，您的点击次数将记录在数组actionLogs中。

在某些情况下，您可能希望记录<input type="button">以外的点击事件。然后我更喜欢使用属性指令而不是元素指令，例如;

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);
        });

    }
};
}]);

您可以使用<input type="button" ng-click="yourNgClickFunc()" loggable>代替<action-button>，您的点击仍会记录在数组actionLogs

中

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

3 个答案: