Angular-ui FullCalendar open modal on eventClick feature in ionic framwork - angularjs

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.

Related

How to open a Popup in Leaflet as Hover and not on Click

I want to open the popup in Angular Leaflet as a hover and not on click.
I have a markers array initialized and an overlay of a layer on top of the base layer.
I am trying to create a layer where buses and bus stops belong to each other. So each layer belongs to the same type in the overlays.
I am using the code
markers = [];
markers.push(
{ layer : layername,
lat : latitude,
lng : longitude,
message: busNames(data),
icon :{....}
}
});
I have another push marker set on the same layer which builds busStop data.
Now how do I display the popups when mouse is moved over them as hover instead of showing them on click
P.S - I am new to coding and hence please help me with proceeding further.
For each marker you are creating you have to listen to 'mouseover' and 'mouseout' events.
You open the popup when 'mouseover' is sent, close it when 'mouseout' is sent.
var marker = L.marker([51.5, -0.09]).addTo(map);
var tooltipPopup;
marker.on('mouseover', function(e) {
tooltipPopup = L.popup({ offset: L.point(0, -50)});
tooltipPopup.setContent("Hello");
tooltipPopup.setLatLng(e.target.getLatLng());
tooltipPopup.openOn(map);
});
marker.on('mouseout', function(e) {
map.closePopup(tooltipPopup);
});
Here is an example
First, you have to include 'leafletData' to your controller, after that add 'mouseover' and 'mouseout' events to your Marker.
angular
.module('myapp')
.controller("EventsController", [ '$scope', 'leafletData', function($scope, leafletData) {
$scope.$on('leafletDirectiveMarker.mouseover', function(event, args){
console.log('I am over!');
var popup = L.popup({ offset: L.point(0, -28)})
.setLatLng([args.model.lat, args.model.lng])
.setContent(args.model.message)
leafletData.getMap().then(function(map) {
popup.openOn(map);
});
});
$scope.$on('leafletDirectiveMarker.mouseout', function(event){
leafletData.getMap().then(function(map) {
map.closePopup();
});
});
}]);

How would I add a swipe action in Javascript using Angular Material

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'});
});
};
}

Angular.js: Is it possible to show a AngularStrap modal programmatically?

I want to trigger the AngularStrap modal: bs-alert when a has edited a table row in my ng-grid. Depending on the HTTP response status, I want to show different kinds of modal messages, e.g. success and error messages.
My code is that after editing an entry in ng-grid, the following gets triggered:
$scope.gridOptions.onRegisterApi = function( gridApi ) {
gridApi.edit.on.afterCellEdit( $scope, function( rowEntity, colDef ) {
$http.put(ApiCall, rowEntity).success(function(data, status, headers, config){
if (data.status === 'OK'){
// Trigger Modal bs-alert
}
else if (data.status === 'ERR'){
// Trigger (same if possible) Modal with different values, coloring, etc
}
});
};
how to achieve this?
Yes, just pass '$alert' into your controller and inside the controller do a
var myAlert = $alert({
title: 'myTitle',
content: 'someContent',
type: 'success',
show: true
});
..at the appropiate part of your code and the popup should show. You can also define global properties of the alert in the app.config section of your code, passing in $alertProvider:
angular.extend($alertProvider.defaults, {
animation: 'am-fade-and-slide-top',
placement: 'top',
duration: 2,
container: 'header',
keyboard: 'true',
show: true,
});

Angular UI Dialog - Closing and Reopening from Dialog causes Background

I am trying to close and reopen a dialog from the actual dialog controller's view. What ends up happening is that after dialog close/open, it won't properly close again. Escape works on some browsers (but the overlay remains) and clicking the background may cause the dialog to close but the overlay will remain (browser dependant).
Question: How can I close/reopen a dialog from a function/button/event on the dialog's controller and that the dialog's close works properly (on escape or clicking background).
The demo below is just a boiled down sample that demonstrates the issue as I will be doing a next/prev and I'd like to close/open on those clicks but am having this issue with not being able to exit the modal.
Here is the online demo: http://plnkr.co/h8djNiSlH6c7d8SNzMmb
Open dialog
Close dialog - works fine except IE (another issue).
Open dialog
Click button inside dialog to close/reopen
Try to close the dialog
Controllers:
function PopupCtrl($scope, $dialog, dialog, item, Utils) {
$scope.items = Utils.getItems();
$scope.item = item;
$scope.reOpen = function (item) {
item = $scope.items[1];
dialog.close();
var d = $dialog.dialog({
dialogFade: true,
backdropClick: true,
dialogOpenClass: 'modal-open',
resolve: {
item: function () {
return angular.copy(item)
}
}
});
d.open('dialog.html', 'PopupCtrl');
};
}
function MainCtrl($scope, $window, $dialog, $location, $timeout, Utils) {
$scope.items = Utils.getItems();
$scope.openDialog = function (item) {
item = $scope.items[0];
var d = $dialog.dialog({
dialogFade: true,
dialogOpenClass: 'modal-open',
resolve: {
item: function () {
return angular.copy(item)
}
}
});
d.open('dialog.html', 'PopupCtrl');
};
}
I've tried this with angular bootstrap v0.2.0 and v.0.3.0 so it is either a bug or there is something I am missing with regards to how I am coding the logic.
This turned out to be an issue with the core dialog directive. Filed a issue and consequent pull request to address:
Details here: https://github.com/angular-ui/bootstrap/pull/381

select a one of the containers from panel in extjs

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

Resources