Как отслеживать все клики на странице в ионном приложении?

Я создал простую страницу, которая содержит флажки. На этой странице пользователь может проверять и снимать флажки несколько раз. Я хочу отслеживать все эти события? Как я могу это сделать?Как отслеживать все клики на странице в ионном приложении?

вот мой код.

app.js

var pmApp = angular.module('pmApp', ['ionic']); 

pmApp.controller('CheckboxController', function($scope) { 
    $scope.devList = [ 
    { text: "Device & app history", details : "Allows the app to view one or more of: information about activity on the device, which apps are running, browsing history and bookmarks" ,checked: true }, 
    { text: "Identity", details: "Uses one or more of: accounts on the device, profile data", checked: false }, 
    { text: "Calendar", details: "Uses calendar information", checked: false }, 
    { text: "Contact", details: "Uses contact information", checked: false }, 
    { text: "Location", details: "Uses the device's location", checked: false }, 
    { text: "SMS", details: "Uses one or more of: SMS, MMS. Charges may apply.", checked: false } 
    ]; 

    $scope.selection=[]; 
    // toggle selection for a given employee by name 
    $scope.toggleSelection = function toggleSelection(item) { 
    var idx = $scope.selection.indexOf(item); 

    // is currently selected 
    if (idx > -1) { 
     $scope.selection.splice(idx, 1); 
    } 

    // is newly selected 
    else { 
     $scope.selection.push(item); 
    } 
    }; 

});

index.html

<div class="list" ng-controller="CheckboxController"> 
     <ion-checkbox ng-repeat="item in devList" 
         ng-model="item.checked" 
         ng-checked="selection.indexOf(item) > -1" 
         ng-click="toggleSelection(item)" 
         > 
      {{ item.text }} 
      <h3 class="item-text-wrap"> {{ item.details }}</h3> 
     </ion-checkbox> 
<div class="item"> 
      <pre ng-bind="selection | json"></pre> 
</div> 
     </div>

Спасибо заранее, любая помощь будет оценена.

С уважением

источник

2015-06-26 sam_k

Куда вы хотите отслеживать запущенные события и что бы вы хотели точно отслеживать? – masimplo

@ mxa055 Я хотел бы отслеживать отметку галочки или отключать события mousehover и нажатия кнопок пользователя. Я хочу, чтобы все эти треки запускались с отметкой времени. Я хочу сохранить эти отслеживаемые данные на стороне сервера. Как я могу поместить данные на сервер? Mongo DB или простой SQL? –

Вы можете попробовать с новейшими Ионными Analytics, если это будет отвечать вашим потребностям. Дополнительная информация об их официальном сообщении в блоге: http://docs.ionic.io/v1.0/docs/analytics-from-scratch.

Использование довольно прямо вперед (от additional docs):

.controller('MyCtrl', function($ionicAnalytics) { 

    $ionicAnalytics.track('Purchase Item', { 
    item_id: 'lpdsx, 
    item_name: 'Leopard Socks' 
    }); 
});

источник

2015-06-26 21:17:34 Nikola

Спасибо за ваш ответ. Я уже видел эти документы. Как я могу отслеживать проверку мыши и checkbox check или отменять события? –

Вы можете использовать https://docs.angularjs.org/api/ng/directive/ngMouseover сделать счетчик для мыши наведен на всех элементах: а затем использовать https://docs.angularjs.org/api/ng/directive/ngClick для записи кликов и https://docs.angularjs.org/api/ng/directive/ngMousemove для записи мышь перемещается и получить позицию:

Все Используется: нг щелкните нг-DblClick нг-MouseDown нг-MouseUp нг-MouseEnter нг-MouseLeave нг-MouseMove нг-Mouseover

Вот несколько примеров кода:

HTML:

<body ng-app="mainModule"> 
    <div ng-controller="mainController"> 
    <h3>1. Click</h3> 
    <button id="firstBtn" ng-click="onFirstBtnClick()">Click me</button> 
    <strong>RESULT:</strong> {{onFirstBtnClickResult}}<br /> 
    <br /> 
    <h3>2. Click with Dependency Injection</h3> 
    <label>Type something: <input type="text" ng-model="secondBtnInput"></label> 
    <button id="secondBtn" ng-click="onSecondBtnClick(secondBtnInput)">Click me</button><br /> 
    <strong>RESULT:</strong> {{onSecondBtnClickResult}}<br /> 
    <br /> 
    <h3>3. Double click</h3> 
    Double-click the square<br /> 
    <img src="images/square.png" ng-dblclick="onDblClick()" /><br /> 
    <strong>RESULT:</strong> {{onDblClickResult}}<br /> 
    <h3>4. Mouse down, up, enter, leave, move, over</h3> 
    Move the mouse on the square<br /> 
    <img src="images/square.png" 
     ng-mousedown="onMouseDown($event)" 
     ng-mouseup="onMouseUp($event)" 
     ng-mouseenter="onMouseEnter($event)" 
     ng-mouseleave="onMouseLeave($event)" 
     ng-mousemove="onMouseMove($event)" 
     ng-mouseover="onMouseOver($event)" /><br /> 
    <strong>MOUSE DOWN RESULT:</strong> {{onMouseDownResult}}<br /> 
    <strong>MOUSE UP RESULT:</strong> {{onMouseUpResult}}<br /> 
    <strong>MOUSE ENTER RESULT:</strong> {{onMouseEnterResult}}<br /> 
    <strong>MOUSE LEAVE RESULT:</strong> {{onMouseLeaveResult}}<br /> 
    <strong>MOUSE MOVE RESULT:</strong> {{onMouseMoveResult}}<br /> 
    <strong>MOUSE OVER RESULT:</strong> {{onMouseOverResult}} 
    </div> 
</body> 
</html>

angular.module("mainModule", []) 
    .controller("mainController", function ($scope) 
    { 
    // Initialization 
    $scope.onFirstBtnClickResult = ""; 
    $scope.secondBtnInput = ""; 
    $scope.onDblClickResult = ""; 
    $scope.onMouseDownResult = ""; 
    $scope.onMouseUpResult = ""; 
    $scope.onMouseEnterResult = ""; 
    $scope.onMouseLeaveResult = ""; 
    $scope.onMouseMoveResult = ""; 
    $scope.onMouseOverResult = ""; 

    // Utility functions 

    // Accepts a MouseEvent as input and returns the x and y 
    // coordinates relative to the target element. 
    var getCrossBrowserElementCoords = function (mouseEvent) 
    { 
     var result = { 
     x: 0, 
     y: 0 
     }; 

     if (!mouseEvent) 
     { 
     mouseEvent = window.event; 
     } 

     if (mouseEvent.pageX || mouseEvent.pageY) 
     { 
     result.x = mouseEvent.pageX; 
     result.y = mouseEvent.pageY; 
     } 
     else if (mouseEvent.clientX || mouseEvent.clientY) 
     { 
     result.x = mouseEvent.clientX + document.body.scrollLeft + 
      document.documentElement.scrollLeft; 
     result.y = mouseEvent.clientY + document.body.scrollTop + 
      document.documentElement.scrollTop; 
     } 

     if (mouseEvent.target) 
     { 
     var offEl = mouseEvent.target; 
     var offX = 0; 
     var offY = 0; 

     if (typeof(offEl.offsetParent) != "undefined") 
     { 
      while (offEl) 
      { 
      offX += offEl.offsetLeft; 
      offY += offEl.offsetTop; 

      offEl = offEl.offsetParent; 
      } 
     } 
     else 
     { 
      offX = offEl.x; 
      offY = offEl.y; 
     } 

     result.x -= offX; 
     result.y -= offY; 
     } 

     return result; 
    }; 

    var getMouseEventResult = function (mouseEvent, mouseEventDesc) 
    { 
     var coords = getCrossBrowserElementCoords(mouseEvent); 
     return mouseEventDesc + " at (" + coords.x + ", " + coords.y + ")"; 
    }; 

    // Event handlers 
    $scope.onFirstBtnClick = function() { 
     $scope.onFirstBtnClickResult = "CLICKED"; 
    }; 

    $scope.onSecondBtnClick = function (value) { 
     $scope.onSecondBtnClickResult = "you typed '" + value + "'"; 
    }; 

    $scope.onDblClick = function() { 
     $scope.onDblClickResult = "DOUBLE-CLICKED"; 
    }; 

    $scope.onMouseDown = function ($event) { 
     $scope.onMouseDownResult = getMouseEventResult($event, "Mouse down"); 
    }; 

    $scope.onMouseUp = function ($event) { 
     $scope.onMouseUpResult = getMouseEventResult($event, "Mouse up"); 
    }; 

    $scope.onMouseEnter = function ($event) { 
     $scope.onMouseEnterResult = getMouseEventResult($event, "Mouse enter"); 
    }; 

    $scope.onMouseLeave = function ($event) { 
     $scope.onMouseLeaveResult = getMouseEventResult($event, "Mouse leave"); 
    }; 

    $scope.onMouseMove = function ($event) { 
     $scope.onMouseMoveResult = getMouseEventResult($event, "Mouse move"); 
    }; 

    $scope.onMouseOver = function ($event) { 
     $scope.onMouseOverResult = getMouseEventResult($event, "Mouse over"); 
    }; 
    });

источник

2015-06-29 15:37:40

Как отслеживать все клики на странице в ионном приложении?

ответ

Смежные вопросы