I am trying to get long press event in angular js .I found the solution from here
https://gist.github.com/BobNisco/9885852
But I am not able to get log on console .here is my code.
http://goo.gl/ZpDeFz
could you please tell me where i am getting wrong ..
$scope.itemOnLongPress = function(id) {
console.log('Long press');
}
$scope.itemOnTouchEnd = function(id) {
console.log('Touch end');
}
It is a good implementation:
// pressableElement: pressable-element
.directive('pressableElement', function ($timeout) {
return {
restrict: 'A',
link: function ($scope, $elm, $attrs) {
$elm.bind('mousedown', function (evt) {
$scope.longPress = true;
$scope.click = true;
// onLongPress: on-long-press
$timeout(function () {
$scope.click = false;
if ($scope.longPress && $attrs.onLongPress) {
$scope.$apply(function () {
$scope.$eval($attrs.onLongPress, { $event: evt });
});
}
}, $attrs.timeOut || 600); // timeOut: time-out
// onTouch: on-touch
if ($attrs.onTouch) {
$scope.$apply(function () {
$scope.$eval($attrs.onTouch, { $event: evt });
});
}
});
$elm.bind('mouseup', function (evt) {
$scope.longPress = false;
// onTouchEnd: on-touch-end
if ($attrs.onTouchEnd) {
$scope.$apply(function () {
$scope.$eval($attrs.onTouchEnd, { $event: evt });
});
}
// onClick: on-click
if ($scope.click && $attrs.onClick) {
$scope.$apply(function () {
$scope.$eval($attrs.onClick, { $event: evt });
});
}
});
}
};
})
Usage example:
<div pressable-element
ng-repeat="item in list"
on-long-press="itemOnLongPress(item.id)"
on-touch="itemOnTouch(item.id)"
on-touch-end="itemOnTouchEnd(item.id)"
on-click="itemOnClick(item.id)"
time-out="600"
>{{item}}</div>
var app = angular.module('pressableTest', [])
.controller('MyCtrl', function($scope) {
$scope.result = '-';
$scope.list = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 }
];
$scope.itemOnLongPress = function (id) { $scope.result = 'itemOnLongPress: ' + id; };
$scope.itemOnTouch = function (id) { $scope.result = 'itemOnTouch: ' + id; };
$scope.itemOnTouchEnd = function (id) { $scope.result = 'itemOnTouchEnd: ' + id; };
$scope.itemOnClick = function (id) { $scope.result = 'itemOnClick: ' + id; };
})
.directive('pressableElement', function ($timeout) {
return {
restrict: 'C', // only matches class name
link: function ($scope, $elm, $attrs) {
$elm.bind('mousedown', function (evt) {
$scope.longPress = true;
$scope.click = true;
$scope._pressed = null;
// onLongPress: on-long-press
$scope._pressed = $timeout(function () {
$scope.click = false;
if ($scope.longPress && $attrs.onLongPress) {
$scope.$apply(function () {
$scope.$eval($attrs.onLongPress, { $event: evt });
});
}
}, $attrs.timeOut || 600); // timeOut: time-out
// onTouch: on-touch
if ($attrs.onTouch) {
$scope.$apply(function () {
$scope.$eval($attrs.onTouch, { $event: evt });
});
}
});
$elm.bind('mouseup', function (evt) {
$scope.longPress = false;
$timeout.cancel($scope._pressed);
// onTouchEnd: on-touch-end
if ($attrs.onTouchEnd) {
$scope.$apply(function () {
$scope.$eval($attrs.onTouchEnd, { $event: evt });
});
}
// onClick: on-click
if ($scope.click && $attrs.onClick) {
$scope.$apply(function () {
$scope.$eval($attrs.onClick, { $event: evt });
});
}
});
}
};
})
li {
cursor: pointer;
margin: 0 0 5px 0;
background: #FFAAAA;
}
.pressable-element {
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
<div ng-app="pressableTest">
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in list"
class="pressable-element"
on-long-press="itemOnLongPress(item.id)"
on-touch="itemOnTouch(item.id)"
on-touch-end="itemOnTouchEnd(item.id)"
on-click="itemOnClick(item.id)"
time-out="600"
>{{item.id}}</li>
</ul>
<h3>{{result}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
JSFiddle: https://jsfiddle.net/reduardo7/u47ok38e/
Based on: https://gist.github.com/BobNisco/9885852
Your code is not working because the directive binds to the elements touchstart and touchend events which you're probably not using if you're testing in a browser.
When I changed them to mousedown and mouseup your script worked fine on my computer's browser.
app.directive('onLongPress', function($timeout) {
return {
restrict: 'A',
link: function($scope, $elm, $attrs) {
$elm.bind('mousedown', function(evt) { // <-- changed
/* ... */
});
$elm.bind('mouseup', function(evt) { // <-- changed
/* ... */
});
}
};
})
Go through the below URL for the angular directive and the implementation approaches,
Source code for long press Directive:
// Add this directive where you keep your directives
.directive('onLongPress', function($timeout) {
return {
restrict: 'A',
link: function($scope, $elm, $attrs) {
$elm.bind('touchstart', function(evt) {
// Locally scoped variable that will keep track of the long press
$scope.longPress = true;
// We'll set a timeout for 600 ms for a long press
$timeout(function() {
if ($scope.longPress) {
// If the touchend event hasn't fired,
// apply the function given in on the element's on-long-press attribute
$scope.$apply(function() {
$scope.$eval($attrs.onLongPress)
});
}
}, 600);
});
$elm.bind('touchend', function(evt) {
// Prevent the onLongPress event from firing
$scope.longPress = false;
// If there is an on-touch-end function attached to this element, apply it
if ($attrs.onTouchEnd) {
$scope.$apply(function() {
$scope.$eval($attrs.onTouchEnd)
});
}
});
}
};
})
Your HTML Should be like this:
<ion-item ng-repeat="item in list" on-long-press="itemOnLongPress(item.id)" on-touch-end="itemOnTouchEnd(item.id)">
{{ item }}
</ion-item>
Controller JS functions to make the definitions that you would prefer:
$scope.itemOnLongPress = function(id) {
console.log('Long press');
}
$scope.itemOnTouchEnd = function(id) {
console.log('Touch end');
}
https://gist.github.com/BobNisco/9885852
Related
I'm loading a page with 3 collapsible panels, all containing a grid.
I can successfully load the panel as expanded (also tested with collapsed), using this code:
var component = {
bindings: {
configurationMigrationLogs: '<'
},
template: require("./reMigrationConfiguration.template.html"),
controller: ControllerFn,
controllerAs: 'vm'
};
ControllerFn.$inject = ['$timeout'];
function ControllerFn($timeout) {
const vm = this;
vm.isCardOpen = true; //Does work.
$timeout(function (vm) {
vm.isCardOpen = false; //Doesn't work.
console.log(vm);
}, 3000, true, vm);
}
export default function (app) {
app.component('reMigrationConfiguration', component);
}
However, when I try to collapse the panel in the $timeout function, it doesn't work.
I can see the vm.isCardOpen property is updated to false, in the console window.
But the panel remains expanded.
Here's the HTML:
<re-card is-collapsed="true" is-open="vm.isCardOpen" ng-repeat="configurationMigrationLog in vm.configurationMigrationLogs">
<!--grid code here-->
</re-card>
The re-card component is set up in this .js:
(function() {
'use strict';
angular.module('app.components')
.directive('reCard', directiveFn);
directiveFn.$inject = ['$timeout'];
function directiveFn($timeout) {
var directive = {
restrict:'EA',
scope:true,
priority:10,
controller:controllerFn,
transclude:true,
controllerAs:'reCard',
template: '<div>' +
'<div re-blocked="isBlocked" re-loading="isBusy"> ' +
'<div class="grid simple fadeIn animated" ' +
'ng-class="{collapsible:isCollapsible, \'is-open\':!isCollapsed }" ' +
're-transclude></div>' +
'</div></div>',
link:{
pre:preLinkFn,
post:postLinkFn
}
};
return directive;
function preLinkFn(scope, ele, attrs) {
if (attrs.isCollapsed) {
scope.isCollapsed = scope.$eval(attrs.isCollapsed);
scope.isCollapsible = attrs.isCollapsed;
scope.isOpen = scope.$eval(attrs.isOpen);
}
}
function postLinkFn(scope, ele, attrs, ctrl) {
var blockWatcher, obsv;
scope.isBusy = false;
if (attrs.notifyOfToggle) {
ctrl.registerNotifyOfToggle(attrs.notifyOfToggle);
}
if (attrs.isBlocked) {
blockWatcher = scope.$parent.$watch(attrs.isBlocked, function(val) {
scope.isBlocked = val;
});
}
if (attrs.hasOwnProperty('isBusy')) {
obsv = attrs.$observe('isBusy', function(val) {
if (val && scope.$eval(val)) {
scope.isBusy = true;
}
else {
scope.isBusy = false;
}
});
}
scope.$on('destroy', function() {
blockWatcher();
});
attrs.$observe('isOpen', function(val) {
if (typeof(val) !== 'undefined') {
ctrl.toggleCollapsed(!scope.$eval(val));
}
});
}
}
controllerFn.$inject = ['$scope'];
function controllerFn($scope) {
var notifyOfToggle = null;
this.getScope = function() {
return $scope;
};
this.toggleCollapsed = function(val) {
if (typeof($scope.isCollapsed) !== 'undefined') {
if (angular.isDefined(val)) {
$scope.isCollapsed = val;
} else {
$scope.isCollapsed = !$scope.isCollapsed;
}
if (notifyOfToggle) {
$scope.$eval(notifyOfToggle);
}
}
};
this.registerNotifyOfToggle = function(notifyOfToggleFromAttrs) {
notifyOfToggle = notifyOfToggleFromAttrs;
};
}
})();
Binding your is-open attribute should fix it:
<re-card is-collapsed="true" is-open="{{vm.isCardOpen}}" ng-repeat="configurationMigrationLog in vm.configurationMigrationLogs">
<!--grid code here-->
</re-card>
With my below angular1.x script code for image annotation I have searched for a solution to solve my conversion error but I didn't get many equalents of angular1.x code in angular4. The error is a runtime error for angular1.x when I try to convert into Angular4. See below.
For $inject I use #inject but it is quite difficult to use it in my code for converting angular 1.x image annotation to angular4 image annotation.
Image annoation in angular1.x
------------------------------
annotoriousAnnotateDirective.$inject = ['annotoriousService', 'setTimeout()'];
annotoriousAnnotateDirective(annotoriousService, setTimeout(()=> {
service = {
restrict: 'A',
link: annotateLink,
priority: 100
},
return service;
link.$inject = ['$scope', '$element', '$attributes'];
annotateLink($scope, $element, $attributes)=> {
if ($attributes.src) {
annotoriousService.makeAnnotatable($element[0]);
} else {
$element.bind('load', function () {
$scope.$apply(function () {
annotoriousService.makeAnnotatable($element[0]);
});
});
}
}
}, 200);
annotoriousDirective.$inject = ['$compile', '$rootScope', '$http', '$parse', '$timeout', 'annotoriousService'];
annotoriousDirective($compile, $rootScope, $http, $parse, $timeout, annotoriousService)=> {
let service = {
restrict: 'E',
scope: {
open: '=',
options: '=',
onOpen: '&',
onLoad: '&',
onComplete: '&',
onCleanup: '&',
onClosed: '&'
},
require: 'annotorious',
link: link,
controller: controller,
controllerAs: 'vm'
};
return service;
controller.$inject = ['$scope'];
controller($scope) {
}
link.$inject = ['$scope', '$element', '$attributes'];
function link($scope, $element, $attributes, controller) {
var cb = null;
$scope.$watch('open', function (newValue, oldValue) {
//console.log("watch $scope.open(" + $scope.open + ") " + oldValue + "->" + newValue);
if (oldValue !== newValue) {
updateOpen(newValue);
}
});
$scope.$on('$destroy', function () {
$element.remove();
});
init();
updateOpen(newValue) {
if (newValue) {
init(newValue);
} else {
if (options.annotationsFor) {
let annotatables = $(options.annotationsFor);
annotatables.each(function (idx) {
let item = this;
annotoriousService.makeAnnotatable(item);
});
}
}
}
init(open) {
let options = {
//href: $attributes.src,
annotationsFor: $attributes.annotationsFor,
onOpen() {
if (this.onOpen && this.onOpen()) {
this.onOpen()();
}
},
onLoad() {
if (this.onLoad && this.onLoad()) {
this.onLoad()();
}
},
onComplete() {
onComplete();
if (this.onComplete && this.onComplete()) {
this.onComplete()();
}
},
onCleanup() {
if (this.onCleanup && this.onCleanup()) {
this.onCleanup()();
}
},
onClosed() {
$scope.$apply(function () {
$scope.open = false;
});
if ($scope.onClosed && $scope.onClosed()) {
$scope.onClosed()();
}
}
};
if (options) {
Object.assign(options, this.options);
}
for (let key in options) {
if (options.hasOwnProperty(key)) {
if (typeof(options[key]) === 'undefined') {
delete options[key];
}
}
}
if (typeof(open) !== 'undefined') {
options.open = open;
}
$timeout(function () {
if (options.annotationsFor) {
$(options.annotationsFor).each(function (i) {
var itemToAnnotate = this;
annotoriousService.makeAnnotatable(itemToAnnotate);
});
}
}, 0);
}
My error code:
I found equalent for #Inject in angular4 ,
import { Inject } from '#angular/core';
import { ourservice } from 'servicepath';
export class{
constructor(#Inject(Ourservice / Directive/ etc) private ourservice){
//our functionality
}
}
If any corrections please let me know, I am still looking solution for Image annotation in angular4
I would like to know how can we get the selected checkbox values from tree in controller from the below example? On click of a button i want to display all the checkbox names in an array. Here is my plnkr- https://plnkr.co/edit/OSpLLl9YrlzqhM7xsYEv?p=preview
//code goes here,
//Controller
Controller to display the tree.
(function (ng) {
var app = ng.module('tree', ['tree.service', 'tree.directives']);
app.controller("TreeController", ["TreeService", function (TreeService) {
var tc = this;
buildTree();
function buildTree() {
TreeService.getTree().then(function (result) {
tc.tree = result.data;
}, function (result) {
alert("Tree no available, Error: " + result);
});
}
}]);
})(angular);
//Tree Directive
Directive used for creating tree node.
(function (ng) {
var app = ng.module('tree.directives', []);
app.directive('nodeTree', function () {
return {
template: '<node ng-repeat="node in tree"></node>',
replace: true,
restrict: 'E',
scope: {
tree: '=children'
}
};
});
app.directive('node', function ($compile) {
return {
restrict: 'E',
replace: true,
templateUrl: 'node.html', // HTML for a single node.
link: function (scope, element) {
/*
* Here we are checking that if current node has children then compiling/rendering children.
* */
if (scope.node && scope.node.children && scope.node.children.length > 0) {
scope.node.childrenVisibility = true;
var childNode = $compile('<ul class="tree" ng-if="!node.childrenVisibility"><node-tree children="node.children"></node-tree></ul>')(scope);
element.append(childNode);
} else {
scope.node.childrenVisibility = false;
}
},
controller: ["$scope", function ($scope) {
// This function is for just toggle the visibility of children
$scope.toggleVisibility = function (node) {
if (node.children) {
node.childrenVisibility = !node.childrenVisibility;
}
};
// Here We are marking check/un-check all the nodes.
$scope.checkNode = function (node) {
node.checked = !node.checked;
function checkChildren(c) {
angular.forEach(c.children, function (c) {
c.checked = node.checked;
checkChildren(c);
});
}
checkChildren(node);
};
}]
};
});
})(angular);
Hello: Look at this plunker link. It works here
https://plnkr.co/edit/vaoCzUJZBf31wtLNJ5f5?p=preview
(function (ng) {
var app = ng.module('tree', ['tree.service', 'tree.directives']);
app.controller("TreeController", ["TreeService", "$scope", function (TreeService, $scope) {
var tc = this;
buildTree();
function buildTree() {
TreeService.getTree().then(function (result) {
tc.tree = result.data;
}, function (result) {
alert("Tree no available, Error: " + result);
});
}
$scope.selectedItems = [];
$scope.getSelected = function(){
$scope.selectedItems = [];
function checkChildren(c) {
angular.forEach(c.children, function (c) {
if (c.checked){
$scope.selectedItems.push({"selected":c.name});
}
checkChildren(c);
});
}
angular.forEach(tc.tree, function(value, key) {
if (value.checked){
$scope.selectedItems.push({"selected":value.name});
}
checkChildren(value);
});
};
}]);})(angular);
I 'm developing a simple ionic app, and part of the app requires you to press two buttons at once. I've built this logic like so:
<!--yT stands for yourThumb, pT stands for partnersThumb -->
<a class="icon ion-qr-scanner lg-txt" on-hold="Global.thumbHoldManager('yT',true)" on-release="Global.thumbHoldManager('yT',false, true)"></a>
<a class="icon ion-qr-scanner lg-txt" on-hold="Global.thumbHoldManager('pT',true)" on-release="Global.thumbHoldManager('pT',false, true)"></a>
I have a method on my controller which handles this event using a service I 've created
var globalCtrl = function (clickHandler, $timeout) {
var self = this;
this.clickHandler = clickHandler;
this.timeout = $timeout;
this.readyState = clickHandler.ready;
this.showInstruction = false;
clickHandler.watchForReady();
};
globalCtrl.prototype.thumbHoldManager = function(which, what, up) {
this.clickHandler.setClickState(which, what);
var self = this;
if (up) {
this.clickHandler.stopWatching();
}
if (!this.readyState) {
this.instruction = "Hold both thumbs in place to scan"
if (!this.showInstruction) {
this.showInstruction = true;
self.timeout(function() {
self.showInstruction = false;
}, 5000)
}
}
};
globalCtrl.$inject = ['clickHandler', '$timeout'];
The service clickHandler exposes an api to a private object whose job it is to track when a button is pressed, and when both buttons are pressed to navigate to a new url.
.factory('clickHandler', [
'$interval',
'$rootScope',
'$location',
function($interval, $rootScope, $location) {
// Service logic
// ...
var clickState = {
yT: false,
pT: false,
ready: false,
watching: false,
watcher: false
};
// Public API here
return {
setClickState: function(which, what) {
clickState[which] = what;
},
getClickState: function(which) {
return clickState[which]
},
getReadyState: function() {
return ((clickState.yT) && (clickState.pT));
},
watchForReady: function() {
var self = this;
clickState.watching = $interval(function() {
clickState.ready = self.getReadyState();
},50);
clickState.watcher = $rootScope.$watch(function() {
return clickState.ready
}, function redirect(newValue) {
if (newValue) {
self.stopWatching();
$location.path('/scan');
}
})
},
stopWatching: function() {
if (clickState.watching) {
$interval.cancel(clickState.watching);
clickState.watcher();
clickState.watching = false;
clickState.watcher = false;
}
}
};
}
])
I don't get any errors with this code, everything works as it should, the watcher gets registered on the hold event and unregistered on the release event. But no matter what I do, I cannot seem to get my phone to detect a press on both buttons. It's always one or the other and I don't know why. I can't test this in the browser or the emulator since multi-touch is not supported and I don't have a multi-touch trackpad if it were.
Here's how I implemented my own directive and service to do this:
.factory('clickHandler', ['$interval', '$rootScope', '$location', '$document', function ($interval, $rootScope, $location, $document) {
// Service logic
// ...
$document = $document[0];
var
touchStart,
touchEnd;
touchStart = ('ontouchstart' in $document.documentElement) ? 'touchstart' : 'mousedown';
touchEnd = ('ontouchend' in $document.documentElement) ? 'touchend' : 'mouseup';
var clickState = {
yT: false,
pT: false,
ready: false,
watching: false,
watcher: false,
startEvent: touchStart,
endEvent: touchEnd
};
// Public API here
return {
setClickState: function (which, what) {
clickState[which] = what;
},
getClickState: function (which) {
return clickState[which]
},
getReadyState: function () {
return ( (clickState.yT) && (clickState.pT) );
},
watchForReady: function () {
var self = this;
//prevent multiple redundant watchers
if (clickState.watching) {
return;
}
clickState.watching = $interval(function () {
clickState.ready = self.getReadyState();
}, 50);
clickState.watcher = $rootScope.$watch(function () {
return clickState.ready
}, function redirect(newValue) {
if (newValue) {
self.stopWatching();
$location.path('/scan');
}
})
},
stopWatching: function () {
if (clickState.watching) {
$interval.cancel(clickState.watching);
clickState.watcher();
clickState.watching = false;
clickState.watcher = false;
}
},
getTouchEvents: function () {
return {
start: clickState.startEvent,
end: clickState.endEvent
}
}
};
}])
.directive('simultaneousTouch', ['clickHandler', '$document', function (clickHandler) {
return {
restrict: 'A',
link: function (scope, elem, attr) {
var touchEvents = clickHandler.getTouchEvents();
elem.on(touchEvents.start, function () {
clickHandler.watchForReady();
clickHandler.setClickState(attr.simultaneousTouch, true);
});
elem.on(touchEvents.end, function () {
clickHandler.stopWatching();
clickHandler.setClickState(attr.simultaneousTouch, false);
})
}
}
}]);
Crossposting stankugo's answer from the ionic forums for the sake of reference. The simple solution below is entirely his idea, I've just done a little cleanup.
angular.module('xxxx').directive('multitouch', function () {
return function(scope, element, attr) {
element.on('touchstart', function() {
scope.$apply(function() {
scope.$eval(attr.multitouch);
});
});
};
});
Use like:
<div multitouch="handler()"></div>
Hi I am newbie to angular I am trying to update using ng-click directive and $watch function. On first click it is getting updated but second time it doesn't get updated. Bare my english and little knowledge Here is my code.
angular.module('charts', [])
.factory('socket', ['$rootScope', function ($rootScope) {
var safeApply = function(scope, fn) {
if (scope.$$phase) {
fn(); // digest already in progress, just run the function
} else {
scope.$apply(fn); // no digest in progress, run with $apply
}
};
var socket = io.connect('http://localhost:5000/');
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
safeApply($rootScope, function () {
callback.apply(socket, args);
});
});
},
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
safeApply($rootScope, function () {
if (callback) {
callback.apply(socket, args);
}
});
})
},
disconnect: function () {
socket.disconnect();
},
socket: socket
};
}])
.controller('mainCtrl',['$scope','socket', function AppCtrl ($scope, socket) {
$scope.options = {width: 500, height: 300, 'bar': 'aaa'};
$scope.data = {"angular":12,"js":15};
$scope.hovered = function(d){
$scope.barValue = d.name;
//$scope.$apply();
};
$scope.barValue = 'None';
}])
.directive('barChart', function(){
var chart = d3.custom.barChart();
return {
restrict: 'E',
replace: true,
template: '<div class="chart"></div>',
scope:{
height: '=height',
data: '=data',
hovered: '&hovered'
},
link: function(scope, element, attrs) {
var chartEl = d3.select(element[0]);
chart.on('customHover', function(d, i){
scope.hovered({args:d});
});
scope.$watch('data', function (newVal, oldVal) {
console.log(newVal);
chartEl.datum(newVal).call(chart);
});
scope.$watch('height', function(d, i){
chartEl.call(chart.height(scope.height));
})
}
}
})
.directive('chartForm', function(){
return {
restrict: 'E',
replace: true,
controller: function AppCtrl ($scope, socket) {
$scope.start = function(d, i) {
$scope.btnIsDisabled = true;
socket.on("connected",function(r){ console.log('breakpoint 1');/*console.log(r);*/ });
socket.on("new tweet", function(tweet) {
var hashtags = tweet.entities.hashtags;
if(hashtags.length) {
_.each(hashtags, function(hashtag) {
hashtag = hashtag.text.toLowerCase();
// if(hashtag == 'food' || hashtag == 'pizza' || hashtag == 'samosa') {
// console.log(hashtag);
if(_hashtags[hashtag]) {
_hashtags[hashtag]++;
}
else {
_hashtags[hashtag] = 1;
}
//}
});
}
num_tweets++;
});
};
$scope.update = function(d, i) {
$scope.safeApply = function(fn) {
var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest') {
if(fn && (typeof(fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
$scope.safeApply( function() {
console.log(JSON.stringify(_hashtags));
$scope.data = _hashtags;
});
};
},
template: '<div class="form">' +
'Height: {{options.height}}<br />' +
'<input type="range" ng-model="options.height" min="100" max="800"/>' +
'<br /><button ng-click="start()" ng-disabled="btnIsDisabled">Start</button>'+
'<button ng-click="update()" ng-disabled="false">Update Data</button>' +
'<br />Hovered bar data: {{barValue}}</div>'
}
});