I am interested in using ngMaterial's swipe since I get the warning...
You are using the ngTouch module.
Angular Material already has mobile click, tap, and swipe support...
ngTouch is not supported with Angular Material!
Problem is for now this element is not under a directive. Instead I currently use angular.element to grab it then using ngTouch publish a global event...
$rootScope.$broadcast('gesture', gestures);
I know it may not be the material-way but I would just like to attach the swipe events manually.
Update
This look promising, although undocumented...
$mdGesture.register(myElement, 'drag', { minDistance: 20, horziontal: false })
Here is my working version
function TouchService($mdGesture, $rootScope){
this.setElement = function (selector) {
var element = angular.element(selector);
$mdGesture.register(element,'swipe', { minDistance: 20, horziontal: false });
element.on("$md.swipeleft", function(){
$rootScope.$broadcast('gesture', {direction: 'left'});
});
element.on("$md.swiperight", function(){
$rootScope.$broadcast('gesture', {direction: 'right'});
});
element.on("$md.swipeup", function(){
$rootScope.$broadcast('gesture', {direction: 'up'});
});
element.on("$md.swipedown", function(){
$rootScope.$broadcast('gesture', {direction: 'down'});
});
};
}
Related
I am creating an ionic project and I am trying to integrate with Algolia autocomplete.js. I managed to make the search system work, however I added a ng-click on my search results and this function is not working as presented in this codepen that I did as example below:
http://codepen.io/marcos_arata/pen/VKVOky
Inside my algolia's result template:
<a ng-click="add_name({{{ name }}})">
Function that should be run when clicked:
$scope.add_name = function(name) {
alert('User added!');
console.log(name);
}
I tried to inject the results inside the scope but didn't work as well:
autocomplete('#search_name', { hint: false, debug: true, openOnFocus: true },[{
source: index.ttAdapter({ hitsPerPage: 15 }),
templates: {
header: '',
suggestion: function(hit) {
$scope.hit = hit;
return template.render(hit);
}
}
}]);
http://codepen.io/marcos_arata/pen/VKVOky
---- SOLVED ----
Instead of creating a ng-click function inside your templates, you can handle the event click of your search inside your "autocomplete:selected" function and use the dataset and suggestion results.
.on('autocomplete:selected', function(event, suggestion, dataset) {
$scope.name = suggestion.name;
console.log($scope.name);
## create any functions with the suggestion and dataset results inside
});
EDITING THE ANSWER:
Here is the codepen:
Apparently the suggestion keep the name clicked, so you dont need an extra function:
.on('autocomplete:selected', function(event, suggestion, dataset) {
$scope.name = suggestion.name;
console.log($scope.name);
});
I am using Ionic framework,I have successfully ported the fullCalender to my project,
I can able to call a funtion on eventClick, even it gives the alert of that event title perfectly.
But my main objective is to open the ionic modal instead of alert() with event title.
The code works till the alert comes, I am new to ionic need some idea how to acheive this.So far I have witten the code below
app.js Code:
$scope.calOptions = {
editable : true,
header : {
left: 'prev',
center: 'title,today',
right: 'next'
},
eventClick: function(calEvent, jsEvent, view){
var a=calEvent.description;
var b=calEvent.title;
alert('ALERT-1:' +a );
$scope.safeApply(function()
{
alert('ALERT-2:' + calEvent.description);
$scope.eventModal(a,b)
});
};
$scope.eventModal=function(a,b){
alert('ALERT-3:'+b);
$scope.eventModal.show();
}
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
$scope.eventModal = $ionicModal;
},{
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
To be more clear the above code shows that the "eventClick:" works till "ALERT-3" ,however,on event click it calls the function "$scope.eventModal=function(a,b)" but after that at the next line at $scope.eventModal.show(); it says that "show is not a function", I want to open modal with variables passed to "$scope.eventModal=function(a,b)" function.
Need an idea to acheive open the modal with parameters passed to the "$scope.eventModal=function(a,b)".
Thanx in advance.
Try doing some simplier:
eventClick: function(calEvent, jsEvent, view){
$scope.a = calEvent.description;
$scope.b = calEvent.title;
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope
}).then(function (modal) {
$scope.modal = modal;
$scope.modal.show();
}).catch(function(err){
console.log(err);
});
};
And inside modal, you can bind {{::a}} and {{::b}} or whatever you want do with them.
I'm using the angular leaflet directive. Everything is working properly on my laptop. But on iPad, the double click is working but the click event is not working at all. I have one event handler for click but it doesn't get triggered.
$scope.events = {
map: {
enable: ['mousedown', 'dblclick', 'click'],
logic: 'broadcast'
}
};
$scope.$on('leafletDirectiveMap.mousedown', function(event) {
alert('click');
});
$scope.$on('leafletDirectiveMap.click', function(event) {
alert('click');
});
$scope.$on('leafletDirectiveMap.dblclick', function(event) {
alert('dbclick');
});
Double click event gets triggered but the other ones not. Anything I can try to debug this?
checkout this https://github.com/angular/material/issues/1300.
Having this below code fixed that issue for us,
$mdGestureProvider.skipClickHijack();
I am a newbee to backbone.I have a view called AbcView
abc.js
var AbcView = Backbone.View.extend({
events: {
"click" : "display",
},
display: function(e){
console.log("hello");
alert("click function");
}
});
Now I am passing this abc.js to another xyz.js file and calling it in another view using ListenTo.
xyz.js
var xyzView = Backbone.View.extend({
initialize: function(){
var AbcView = new AbcView ();
this.lisenTo(AbcView, "click",this.display);
},
render: function(){
var html = this.template(AbcView);
this.$el.html(html);
return this;
},
display: function(e){
console.log("parent hello");
alert("parent display function");
}
});
With abc.js click event is triggering fine. But with xyz.js click event is not triggering.
Is this the correct way to call listenTo.
DOM events aren't delegated on the View object.
If you want to emulate this though, you'd have to manually emit the event in ABC display method:
display: function(e){
// Trigger manually
this.trigger("click");
// Your usual code
console.log("hello");
alert("click function");
}
In term of best practice, I'd probably rename "click" to a more descriptive event name.
Backbone's on and listenTo are intended for listening to events on Backbone Models and Collections.
http://backbonejs.org/#Events-catalog
This is an important thing to understand. It is not the same as UI event binding, as described in http://backbonejs.org/#View-delegateEvents.
That being said, you can use something like what Simon suggests to intermingle the two.
Extjs 4.1.1(a), In my project, there is a panel (with Id #monthCalendar) which has 42 containers inside it in a View. I am trying to create a controller for that view. Here the controllers action is to show "hello" message whenever I click on any of the container inside the panel. I tried the following which is not showing any kind of error in chrome console.
In my controller:
onLaunch: function(){
Ext.each(Ext.ComponentQuery.query('#monthCalendar container'),function(container){
container.on('click',function(){
alert("hello");
},container,{element: 'el'})
})
}
This one should work
Ext.each(Ext.ComponentQuery.query('#monthCalendar container'),function(c){
c.on({ click: {fn: function(){ alert("hello"); },scope: this, element:'el' }})
})
It seems the containers inside the panel were not redered when the click event was called.(though, the containers were visible on the page. I don't know what possibly the bug is?) So, instead of using onLaunch, I used init template in which I called the render event (indirectly called the click event) and this worked.
init: function(){
this.control({
'#monthCalendar container': {
render: this.onContainerRendered
}
})
},
onContainerClicked: function() {
alert('The container was clicked');
},
onContainerRendered: function(container) {
container.on('click',this.onContainerClicked,container,{element: 'el'})
},
Working Fiddle