2

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

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

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

4

2 回答 2

2

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

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：“覆盖” ng-click：http: //jsfiddle.net/bmleite/7wBsv/2/

于 2013-01-18T09:40:06.430 回答
0

如何将点击事件处理程序添加到 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>

于 2013-01-22T13:19:01.383 回答