How to update angular progress bar every time I click - angularjs

Hi I am using angular progress bar and I want to update every time I click a button.
<div ng-controller="ProgressDemoCtrl">
<br/>
<h3>
Dynamic
<button class="btn btn-sm btn-primary" ng-click="random()" type="button">Randomize</button>
</h3>
<small>
<em>No animation</em>
</small>
<progressbar animate="false" type="success" value="dynamic">
<b>{{dynamic}}%</b>
</progressbar>
</div>
ANGULAR
var ProgressDemoCtrl = function ($scope) {
$scope.max = 00;
$scope.random = function() {
var value = Math.floor((Math.random() * 100) + 1);
var type;
if (value < 25) {
type = 'success';
} else if (value < 50) {
type = 'info';
} else if (value < 75) {
type = 'warning';
} else {
type = 'danger';
}
$scope.showWarning = (type === 'danger' || type === 'warning');
$scope.dynamic = value;
$scope.type = type;
};
$scope.random();
$scope.randomStacked = function() {
$scope.stacked = [];
var types = ['success', 'info', 'warning', 'danger'];
for (var i = 0, n = Math.floor((Math.random() * 4) + 1); i < n; i++) {
var index = Math.floor((Math.random() * 4));
$scope.stacked.push({
value: Math.floor((Math.random() * 30) + 1),
type: types[index]
});
}
};
$scope.randomStacked();
};
as you can see in here what it does when i click the button is filling it up randomly.So what i want to do is be able to click a button and update the progress bar.

If you are using angular bootstrap's progressbar this is very easy. I just made a plunkr for it.
Your HTML
<div ng-controller="ProgressDemoCtrl">
<h3>Progress bar value is {{dynamic}}</h3>
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">
{{dynamic}} / {{max}}
</span>
</progressbar>
<input type="button" ng-click="progress()" value="Click Me To Progress" />
</div>
</body>
</html>
and JS
angular.module('plunker', ['ui.bootstrap']);
var ProgressDemoCtrl = function ($scope) {
$scope.dynamic = 10;
$scope.max = 100;
$scope.progress = function(){
$scope.dynamic = $scope.dynamic + 10;
};
};

Related

passing variable value from controller to view in AngularJS

I am developing an application where i popup a window and when it gets popup the next time i will try to open it should not be opened. Next time it should open When i will close the popup then it should open.
Now for that i am using count variable and whenever it will be 1 the popup opens and whenever it is greater than or equal to 2 it shows alert. But now when i close the popup it is not resetting the value of count to 0 in view.
In JSfiddle i tried using var self = this; it works fine but when i tried it on my code it says Uncaught Exception Typeerror cannot find property 'count' defined at line self.count = 0;
How to achieve this? or any alternate solution for this?
<a ui-sref-active="active" ng-click="count=count+1; connectMachine(machine, count)" ng-init="count=0" ><span><i class="fa fa-desktop fa-5x"></i></span></a>
$scope.connectMachine = function(machine, count) {
var promise = restAPIService.connectMachineService(
$scope.thisStudentThisBatch.guacProfileId,
machine.connectionId, $stateParams.batchID).get();
promise.$promise.then(function(response) {
var json = JSON.parse(response.data);
console.log(json.id);
var dnsUrl = $location.absUrl().split('/');
dnsUrl = dnsUrl[0] + '//' + dnsUrl[2];
var apiUrl = dnsUrl + $rootScope.apiUrl + "guacamole/disconnect/"
+ json.id;
var conn_params = $http.defaults.headers.common.Authorization
+ "++" + apiUrl;
$scope.machineURL = response.headers.url + "&conn_params="
+ conn_params;
var params = "height=" + screen.availHeight + ",width="
+ screen.availWidth;
var NewWin;
var self = this;
if ($scope.count == 1) {
NewWin = window.open($scope.machineURL);
} else if ($scope.count >= 2) {
alert("Back Off Back Off");
}
function checkWindow() {
if (NewWin && NewWin.closed) {
window.clearInterval(intervalID);
self.count = 0;
}
}
var intervalID = window.setInterval(checkWindow, 500);
}, function(error) {
dialogs.error("Error", error.data.error, {
'size' : 'sm'
});
});
}
You can use a variable defined on $scope to trigger the value of button instead of using ng-init
HTML:
<div ng-app="myApp">
<ul ng-controller="TodoCtrl">
<li class="list-group-item" ng-repeat="todo in todos">{{todo.text}}
<button class="btn btn-default" ng-click="addLike($index)">value- {{count[$index]}}</button>
</li>
</ul>
</div>
JS:
var myApp = angular.module('myApp', []);
function TodoCtrl($scope) {
$scope.todos = [{
text: 'todo one'
}, {
text: 'todo two',
done: false
}];
$scope.count = [0, 0];
$scope.addLike = function(index) {
var NewWin;
$scope.count[index] ++;
if ($scope.count[index] == 1) {
NewWin = window.open('https://www.google.com');
} else if ($scope.count >= 2) {
alert("Back Off Back Off");
}
function checkWindow() {
if (NewWin && NewWin.closed) {
window.clearInterval(intervalID);
$scope.count[index] = 0;
$scope.$apply();
}
}
var intervalID = window.setInterval(checkWindow, 500);
};
};
JS Fiddle :https://jsfiddle.net/p41dLjmn/

Change Different type of Attributes for Dynamically added every element

How can I Change (type) Attribute for each added dynamic buttons? In below code, label names were changing perfectly, but when i am trying to change button types it is applying to all added dynamic buttons,
My requirement is have to change every button type with different types (means: first added button type to submit, second added type to reset, third added button to cancel). but in my code if i change second button type to 'Reset' at the same time the first button type also going to Reset type... can u please tell me how can i change button type for every added element ...
Working DEMO
Updated:
var app = angular.module('myapp', ['ngSanitize']);
app.controller('MainCtrl', function($scope, $compile) {
var counter = 0;
$scope.buttonFields = [];
$scope.add_Button = function(index) {
$scope.buttonFields[counter] = {button: 'Submit'};
var buttonhtml = '<div ng-click="selectButton(buttonFields[\'' + counter + '\'])"><button id="button_Type">{{buttonFields[' + counter + '].button}}</button>//click//</div>';
var button = $compile(buttonhtml)($scope);
angular.element(document.getElementById('add')).append(button);
$scope.changeTosubmit = function (val) {
$scope.buttonField = val;
var els = document.body.querySelectorAll('#button_Type');
for (var i = 0, ils = els.length; i < ils; i++) {
var el = els[i];
el.setAttribute("type", "submit");
compile(el);
}
};
$scope.changeToreset = function (val) {
$scope.buttonField = val;
var els = document.body.querySelectorAll('#button_Type');
for (var i = 0, ils = els.length; i < ils; i++) {
var el = els[i];
el.setAttribute("type", "reset");
compile(el);
}
};
$scope.changeTocancel = function (val) {
$scope.buttonField = val;
var els = document.body.querySelectorAll('#button_Type');
for (var i = 0, ils = els.length; i < ils; i++) {
var el = els[i];
el.setAttribute("type", "cancel");
compile(el);
}
};
++counter;
};
$scope.selectButton = function (val) {
$scope.buttonField = val;
$scope.showButton_Types = true;
};
});
function compile(element) {
var el = angular.element(element);
$scope = el.scope();
$injector = el.injector();
$injector.invoke(function ($compile) {
$compile(el)($scope);
});
};
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="add_Button($index)">Add Buttons</button>
<hr>
<div id="add"></div>
<form ng-show="showButton_Types">
<div>
<label>Button Name(?)</label><br/>
<input ng-model="buttonField.button">
</div>
<div>
<label>change button types(?)</label><br/>
<input ng-click="changeTosubmit(buttonFields['' + counter + ''])" name="submit" type="radio"> Submit
<input ng-click="changeToreset(buttonFields['' + counter + ''])" name="submit" type="radio"> Reset
<input ng-click="changeTocancel(buttonFields['' + counter + ''])" name="submit" type="radio"> Cancel
</div>
</form>
</body>
</html>

How to Keep track of all clicks on page in ionic application?

I have created simple page which contains check boxes. On this page user can check and uncheck boxes multiple times. I want to keep track of all these events? How Can I do that?
here is my code.
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>
Thanks in advance, any help would be appreciated.
Regards
You can use https://docs.angularjs.org/api/ng/directive/ngMouseover to make a counter for mouse hovers on all your elements: and then use
https://docs.angularjs.org/api/ng/directive/ngClick to record clicks and https://docs.angularjs.org/api/ng/directive/ngMousemove to record the mouse being moved and get the position:
Everything Used:
ng-click
ng-dblclick
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
Here is some example code:
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>
JS
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");
};
});
You could try with the newest Ionic Analytics, if that will suit your needs. More info on their official blog post: http://docs.ionic.io/v1.0/docs/analytics-from-scratch.
Usage is pretty straight forward (from the additional docs):
.controller('MyCtrl', function($ionicAnalytics) {
$ionicAnalytics.track('Purchase Item', {
item_id: 'lpdsx,
item_name: 'Leopard Socks'
});
});

angularjs <timer /> won't update

I have this angularjs controller
angular.module('dashboardApp', ['timer']);
function timingController($scope) {
$scope.timerRunning = false;
$scope.startTimer = function () {
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function () {
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.resumeTimer = function () {
$scope.$broadcast('timer-resume');
$scope.timerRunning = true;
};
}
timingController.$inject = ['$scope'];
and this HTML
<div class="row" ng-controller="timingController">
<div class="col-md-12">
<p>
<timer> minutes, seconds.</timer><br />
<button type="button" ng-click="startTimer()" ng-show="!timerRunning" ng-disabled="timerRunning" class="btn btn-success btn-lg btn-block" id="start-timer">Start Timer</button>
<button type="button" ng-click="resumeTimer()" ng-show="timerRunning" ng-disabled="!timerRunning" class="btn btn-success btn-lg btn-block" id="resume-timer">Resume Timer</button>
<button type="button" ng-click="stopTimer()" ng-show="timerRunning" ng-disabled="!timerRunning" class="btn btn-danger btn-lg btn-block" id="stop-timer">Stop Timer</button>
<button type="button" class="btn btn-danger btn-lg btn-block" id="reset-timer" style="display:none;">Reset Timer</button>
</p>
</div>
</div>
The controller is detected, methods are called and i have inserted the timer js directive.. But The values doen't seem to update (broadcast doesn't seem to work). Do you see any problem with this code?
I haven't got any online hosting to host the timer.js script, so my jsfiddle here has problems loading :(
Just change <timer> minutes, seconds.</timer> to <timer>{{minutes}} minutes, {{seconds}} seconds.</timer>.
See the code snippet below. (I embedded the code for the timer directive only so that you can test it here.)
angular.module('dashboardApp', ['timer']);
function timingController($scope) {
$scope.timerRunning = false;
$scope.startTimer = function () {
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function () {
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.resumeTimer = function () {
$scope.$broadcast('timer-resume');
$scope.timerRunning = true;
};
}
timingController.$inject = ['$scope'];
/**
* angular-timer - v1.1.6 - 2014-07-01 7:37 AM
* https://github.com/siddii/angular-timer
*
* Copyright (c) 2014 Siddique Hameed
* Licensed MIT <https://github.com/siddii/angular-timer/blob/master/LICENSE.txt>
*/
var timerModule = angular.module('timer', [])
.directive('timer', ['$compile', function ($compile) {
return {
restrict: 'EAC',
replace: false,
scope: {
interval: '=interval',
startTimeAttr: '=startTime',
endTimeAttr: '=endTime',
countdownattr: '=countdown',
finishCallback: '&finishCallback',
autoStart: '&autoStart',
maxTimeUnit: '='
},
controller: ['$scope', '$element', '$attrs', '$timeout', function ($scope, $element, $attrs, $timeout) {
// Checking for trim function since IE8 doesn't have it
// If not a function, create tirm with RegEx to mimic native trim
if (typeof String.prototype.trim !== 'function') {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, '');
};
}
//angular 1.2 doesn't support attributes ending in "-start", so we're
//supporting both "autostart" and "auto-start" as a solution for
//backward and forward compatibility.
$scope.autoStart = $attrs.autoStart || $attrs.autostart;
if ($element.html().trim().length === 0) {
$element.append($compile('<span>{{millis}}</span>')($scope));
} else {
$element.append($compile($element.contents())($scope));
}
$scope.startTime = null;
$scope.endTime = null;
$scope.timeoutId = null;
$scope.countdown = $scope.countdownattr && parseInt($scope.countdownattr, 10) >= 0 ? parseInt($scope.countdownattr, 10) : undefined;
$scope.isRunning = false;
$scope.$on('timer-start', function () {
$scope.start();
});
$scope.$on('timer-resume', function () {
$scope.resume();
});
$scope.$on('timer-stop', function () {
$scope.stop();
});
$scope.$on('timer-clear', function () {
$scope.clear();
});
$scope.$on('timer-set-countdown', function (e, countdown) {
$scope.countdown = countdown;
});
function resetTimeout() {
if ($scope.timeoutId) {
clearTimeout($scope.timeoutId);
}
}
$scope.start = $element[0].start = function () {
$scope.startTime = $scope.startTimeAttr ? new Date($scope.startTimeAttr) : new Date();
$scope.endTime = $scope.endTimeAttr ? new Date($scope.endTimeAttr) : null;
if (!$scope.countdown) {
$scope.countdown = $scope.countdownattr && parseInt($scope.countdownattr, 10) > 0 ? parseInt($scope.countdownattr, 10) : undefined;
}
resetTimeout();
tick();
$scope.isRunning = true;
};
$scope.resume = $element[0].resume = function () {
resetTimeout();
if ($scope.countdownattr) {
$scope.countdown += 1;
}
$scope.startTime = new Date() - ($scope.stoppedTime - $scope.startTime);
tick();
$scope.isRunning = true;
};
$scope.stop = $scope.pause = $element[0].stop = $element[0].pause = function () {
var timeoutId = $scope.timeoutId;
$scope.clear();
$scope.$emit('timer-stopped', {timeoutId: timeoutId, millis: $scope.millis, seconds: $scope.seconds, minutes: $scope.minutes, hours: $scope.hours, days: $scope.days});
};
$scope.clear = $element[0].clear = function () {
// same as stop but without the event being triggered
$scope.stoppedTime = new Date();
resetTimeout();
$scope.timeoutId = null;
$scope.isRunning = false;
};
$element.bind('$destroy', function () {
resetTimeout();
$scope.isRunning = false;
});
function calculateTimeUnits() {
// compute time values based on maxTimeUnit specification
if (!$scope.maxTimeUnit || $scope.maxTimeUnit === 'day') {
$scope.seconds = Math.floor(($scope.millis / 1000) % 60);
$scope.minutes = Math.floor((($scope.millis / (60000)) % 60));
$scope.hours = Math.floor((($scope.millis / (3600000)) % 24));
$scope.days = Math.floor((($scope.millis / (3600000)) / 24));
$scope.months = 0;
$scope.years = 0;
} else if ($scope.maxTimeUnit === 'second') {
$scope.seconds = Math.floor($scope.millis / 1000);
$scope.minutes = 0;
$scope.hours = 0;
$scope.days = 0;
$scope.months = 0;
$scope.years = 0;
} else if ($scope.maxTimeUnit === 'minute') {
$scope.seconds = Math.floor(($scope.millis / 1000) % 60);
$scope.minutes = Math.floor($scope.millis / 60000);
$scope.hours = 0;
$scope.days = 0;
$scope.months = 0;
$scope.years = 0;
} else if ($scope.maxTimeUnit === 'hour') {
$scope.seconds = Math.floor(($scope.millis / 1000) % 60);
$scope.minutes = Math.floor((($scope.millis / (60000)) % 60));
$scope.hours = Math.floor($scope.millis / 3600000);
$scope.days = 0;
$scope.months = 0;
$scope.years = 0;
} else if ($scope.maxTimeUnit === 'month') {
$scope.seconds = Math.floor(($scope.millis / 1000) % 60);
$scope.minutes = Math.floor((($scope.millis / (60000)) % 60));
$scope.hours = Math.floor((($scope.millis / (3600000)) % 24));
$scope.days = Math.floor((($scope.millis / (3600000)) / 24) % 30);
$scope.months = Math.floor((($scope.millis / (3600000)) / 24) / 30);
$scope.years = 0;
} else if ($scope.maxTimeUnit === 'year') {
$scope.seconds = Math.floor(($scope.millis / 1000) % 60);
$scope.minutes = Math.floor((($scope.millis / (60000)) % 60));
$scope.hours = Math.floor((($scope.millis / (3600000)) % 24));
$scope.days = Math.floor((($scope.millis / (3600000)) / 24) % 30);
$scope.months = Math.floor((($scope.millis / (3600000)) / 24 / 30) % 12);
$scope.years = Math.floor(($scope.millis / (3600000)) / 24 / 365);
}
// plural - singular unit decision
$scope.secondsS = $scope.seconds == 1 ? '' : 's';
$scope.minutesS = $scope.minutes == 1 ? '' : 's';
$scope.hoursS = $scope.hours == 1 ? '' : 's';
$scope.daysS = $scope.days == 1 ? '' : 's';
$scope.monthsS = $scope.months == 1 ? '' : 's';
$scope.yearsS = $scope.years == 1 ? '' : 's';
//add leading zero if number is smaller than 10
$scope.sseconds = $scope.seconds < 10 ? '0' + $scope.seconds : $scope.seconds;
$scope.mminutes = $scope.minutes < 10 ? '0' + $scope.minutes : $scope.minutes;
$scope.hhours = $scope.hours < 10 ? '0' + $scope.hours : $scope.hours;
$scope.ddays = $scope.days < 10 ? '0' + $scope.days : $scope.days;
$scope.mmonths = $scope.months < 10 ? '0' + $scope.months : $scope.months;
$scope.yyears = $scope.years < 10 ? '0' + $scope.years : $scope.years;
}
//determine initial values of time units and add AddSeconds functionality
if ($scope.countdownattr) {
$scope.millis = $scope.countdownattr * 1000;
$scope.addCDSeconds = $element[0].addCDSeconds = function (extraSeconds) {
$scope.countdown += extraSeconds;
$scope.$digest();
if (!$scope.isRunning) {
$scope.start();
}
};
$scope.$on('timer-add-cd-seconds', function (e, extraSeconds) {
$timeout(function () {
$scope.addCDSeconds(extraSeconds);
});
});
$scope.$on('timer-set-countdown-seconds', function (e, countdownSeconds) {
if (!$scope.isRunning) {
$scope.clear();
}
$scope.countdown = countdownSeconds;
$scope.millis = countdownSeconds * 1000;
calculateTimeUnits();
});
} else {
$scope.millis = 0;
}
calculateTimeUnits();
var tick = function () {
$scope.millis = new Date() - $scope.startTime;
var adjustment = $scope.millis % 1000;
if ($scope.endTimeAttr) {
$scope.millis = $scope.endTime - new Date();
adjustment = $scope.interval - $scope.millis % 1000;
}
if ($scope.countdownattr) {
$scope.millis = $scope.countdown * 1000;
}
if ($scope.millis < 0) {
$scope.stop();
$scope.millis = 0;
calculateTimeUnits();
if($scope.finishCallback) {
$scope.$eval($scope.finishCallback);
}
return;
}
calculateTimeUnits();
//We are not using $timeout for a reason. Please read here - https://github.com/siddii/angular-timer/pull/5
$scope.timeoutId = setTimeout(function () {
tick();
$scope.$digest();
}, $scope.interval - adjustment);
$scope.$emit('timer-tick', {timeoutId: $scope.timeoutId, millis: $scope.millis});
if ($scope.countdown > 0) {
$scope.countdown--;
}
else if ($scope.countdown <= 0) {
$scope.stop();
if($scope.finishCallback) {
$scope.$eval($scope.finishCallback);
}
}
};
if ($scope.autoStart === undefined || $scope.autoStart === true) {
$scope.start();
}
}]
};
}]);
/* commonjs package manager support (eg componentjs) */
if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
module.exports = timerModule;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row" ng-app="dashboardApp">
<div class="col-md-12"><div class="row" ng-controller="timingController">
<div class="col-md-12">
<p>
<h3>Timer 1: <timer autostart="false" /></h3>
<h3>Timer 2: <timer autostart="false" interval="2000"/></h3>
<h3>Timer 3: <timer autostart="false">{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
<button type="button" ng-click="startTimer()" ng-show="!timerRunning" ng-disabled="timerRunning" class="btn btn-success btn-lg btn-block" id="start-timer">Start Timer</button>
<button type="button" ng-click="resumeTimer()" ng-show="!timerRunning" ng-disabled="timerRunning" class="btn btn-success btn-lg btn-block" id="resume-timer">Resume Timer</button>
<button type="button" ng-click="stopTimer()" ng-show="timerRunning" ng-disabled="!timerRunning" class="btn btn-danger btn-lg btn-block" id="stop-timer">Stop Timer</button>
<button type="button" class="btn btn-danger btn-lg btn-block" id="reset-timer" style="display:none;">Reset Timer</button>
</p>
</div>
</div>
</div>
</div>

ngClick not firing when $swipe is bound

I have an ngClick directive on elements that are also bound to $swipe. The ngClick doesn't fire (it was firing before the $swipe was added).
I'm using jQuery mobile combined with AngularJS.
Interestingly, my diagnostics show a swipe event with start and end the same - seems to contradict the minimum swipe distance, but perhaps the cancel function is being called. Possibly I could use the cancel function to find out where the click occurred but I feel I shouldn't have to do that.
The site is viewable at http://skimobile.cbdweb.net
HTML
<div id="matrix" data-role="page" ng-controller="matrixCtrl" ng-init="init()">
<div data-role="header">
<?php echo CHtml::encode($this->configs['SITENAME']); ?> Bookings
</div>
<div data-role="content">
<div class="lodgename noborder"> </div>
<div class="oneday onemonth" ng-repeat="m in months" ng-style="callMonthstyle(m)" ng-class="$last ? 'lastcol' : ''" on-finish-days>
{{monthNames[m.month]}} {{m.year}}
</div>
<br clear="both" />
<div class="lodgename noborder"> </div>
<div class="oneday" ng-style="callDaystyle()" ng-class="$last ? 'lastcol' : ''" ng-repeat="d in dates">
{{d.getDate()}}
</div>
<br clear="both" />
<div ng-repeat="lodge in data.lodges">
<div class="lodgename" ng-class="$last ? 'lastrow' : ''">{{lodge.lodgetitle}}</div>
<div class="oneday" ng-style="callDaystyle()" ng-class="($last ? 'lastcol' : '') + ' ' + ($parent.$last ? 'lastrow' : '')" ng-repeat="d in dates" ng-click="showDate(lodge, d)">
</div>
<br clear="both" />
</div>
<div ng-show="data.debug" style="margin-top: 20px;"
<ul>
<li>
move = {{swipe.move}}
</li>
<li>
start = {{swipe.start}}
</li>
<li>
end = {{swipe.end}}
</li>
<li>
scope.startDay = {{startDay}}
</li>
<li>
daysMoved = {{swipe.daysMoved}}
</li>
<li>
daysFinished = {{nDaysFinished}}
</li>
</ul>
</div>
<ul>
<?php foreach(Yii::app()->params['lodges'] as $lodgecode=>$lodge) {
echo "<li>" . $lodgecode . " = " . $lodge['lodgetitle'] . "</li>";
$lci = $this->lodgeconfigs[$lodgecode]['PREFIX_BOOKING_ID'];
echo "<LI>" . $lci . "</li>";
} ?>
</ul>
</div>
</div>
Javascript:
/* NG services */
var matrix = angular.module('Skimobile', ['ngTouch']);
matrix.factory('dayswidth', ['writeDays', function(){ // gets called on window change width
return function(scope, ww) {
var lodgename = $('.lodgename').first().width() + 4; // 4 = padding in lodgename class
var padding = 60 + lodgename;
var oldDisplayDays = scope.displayDays;
scope.displayDays = Math.min(28, (ww - padding)/scope.mindaywidth); // show at most 28 days, fewer if needed to maintain minimum width
scope.dayWidth = Math.floor( (ww-padding) / scope.displayDays );
if(oldDisplayDays!=scope.displayDays) { // avoid changing scope.dates as this will cause infinite recursion in the $digest on ng-repeat d in dates
scope.callWriteDays();
}
};
}]);
matrix.factory('writeDays', function() {
return function(scope) {
var d = new Date();
d.setTime(scope.startDay.getTime());
scope.dates = []; // repeat on this to draw days
scope.months = []; // repeat on this to draw months
var yearShown = false; // only show year once, when the month is long enough
var m = d.getMonth();
var daysLeft = 0; // days shown belonging to each month
for(i=0; i<scope.displayDays; i++) {
scope.dates.push(new Date(d.getTime()));
var oldd = new Date(d.getTime());
d.setDate(d.getDate()+1);
daysLeft++;
var newm = d.getMonth();
if(newm!=m) { // finished a month, display it
var newMonthObj = {month:m, days:daysLeft};
if(!yearShown && daysLeft*scope.dayWidth-1-4>3*scope.mindaywidth) {
newMonthObj.year = oldd.getFullYear();
yearShown = true;
} else {
newMonthObj.year = '';
}
scope.months.push(newMonthObj);
m = newm;
daysLeft = 0;
}
}
if(daysLeft>0) { // final month
newMonthObj = {month:m, days:daysLeft};
newMonthObj.year = yearShown ? '' : oldd.getFullYear();
scope.months.push(newMonthObj);
}
}
});
matrix.factory('daystyle', function(){
return function(scope) {
return {
'width': (scope.dayWidth-1) + 'px'
}; // -1 allows for border
}
});
matrix.factory('monthstyle', function(){
return function(scope, m) {
var days = m.days;
return {
'width': (scope.dayWidth*days-1-4) + 'px'
} // 1 for border, 4 for padding-left
}
});
matrix.directive('onFinishDays', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if(scope.$last === true) { // without this it gets called once per visible month!
$timeout(function() {
scope.$emit('daysFinished');
})
}
}
}
});
/* NG controllers */
function matrixCtrl($scope, dayswidth, writeDays, daystyle, monthstyle, $swipe) {
$scope.callDayswidth = function(w){
dayswidth($scope, w);
};
$scope.callDaystyle = function() {
return daystyle($scope);
}
$scope.callMonthstyle = function(m) {
return monthstyle($scope, m);
}
$scope.callWriteDays = function() {
return writeDays($scope);
}
$scope.data = _main; // passed via Yii layout file
$scope.mindaywidth = 30;
$scope.monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var d = new Date(); // initially the matrix starts from today
$scope.startDay = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
var w = $(window);
$scope.getWindowDimensions = function() {
return {'h': w.height(), 'w': w.width()};
};
$scope.$watch($scope.getWindowDimensions, function(newValue, oldValue){
$scope.callDayswidth(newValue.w);
}, true);
w.bind('resize', function() {
$scope.$apply();
})
$scope.showDate = function(lodge, d){
alert(lodge.lodgetitle + ' ' + d.getDate());
}
$scope.swipe = {};
$scope.nDaysFinished = 0;
$scope.$on('daysFinished', function(event) {
$scope.nDaysFinished++;
$swipe.bind($('.oneday'), {
end:function(loc){
$scope.swipe.end = loc.x;
$scope.swipe.daysMoved = Math.floor((loc.x - $scope.swipe.start) / $scope.dayWidth);
$scope.startDay.setTime($scope.startDay.getTime() - $scope.swipe.daysMoved*24*60*60*1000); // compute new start day at end of drag;
$scope.callWriteDays();
$scope.$apply();
}
})
});
}

Resources