Question

在我的angular-js应用程序中，我想跟踪每个用户如何使用它。因此，最初我在客户端上构建一个日志机制，以跟踪用户单击的内容，然后将数据发送到我的服务器上。

这里的主要问题是我想在我的应用程序中记录所有ng-click事件。是否可以集中进行此操作而不必转到每个功能并添加我的功能？

最终我想在日志消息中包含被点击的div的id。

Answer 1

使用指令和服务，如下所示：

app.directive('logClickEvent', function(Logger) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) { 
      element.bind('click', function(event) {
        Logger.logEvent(event);
      });
    }
  }  
})

app.factory('Logger', function () {
  return { 
    logEvent: function(event) {
      // implement your logger logic here
    }
  };
});

然后将指令放在要记录的所有元素上：

<button id="button1" log-click-event>button1</button>

jsFiddle ：http://jsfiddle.net/bmleite/7wBsv/

选项＃2 ：＆＃39;覆盖＆＃39; ng-click：http://jsfiddle.net/bmleite/7wBsv/2/

Answer 2

如何将点击事件处理程序添加到html正文/文档对象并以这种方式处理？

扩展bmleite的jsFiddle - http://jsfiddle.net/w8txe/3/

但最重要的是，如果记录ID将足够提供信息，如果没有 - 您将如何提取相关信息以使日志记录有用？

总是可以传入$ location / $ rootScope / etc以在日志处理程序中提取更多上下文信息。

<body log-click-event>
    <div ng-controller="Ctrl">
      <button id="button1">button1</button>
      <button id="button2">button2</button>
     <div id="div1" class="box">
          <ul>
              <li id="li1">Some LI</li>
              <li id="li2">Some LI</li>
              <li id="li3">Some LI</li>
         </ul>
     </div>
<div>

记录ng-click集中

2 个答案: