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,
});
Related
I have an $ionicPopup defined inside a particular controller say Controller-1. When I move to Controller-1 from any other different Controller-X by changing the state as $state.go('xxx.xx.xx'), the $ionicPopup is not working as expected. But at the same time, if I open Controller-1 for the first time, $ionicPopup works fine. State change is causing issue. How to solve it?
The code for $ionicPopup inside Controller-1 is:
$ionicPopup.show({
title: "Delivery Not Available",
subTitle: 'Selected area is beyond our delivering area. You can place only Take Away orders.',
scope: $scope,
buttons: [{
text: 'Cancel',
onTap: function(e) {
return true;
}
},
{
text: '<b>OK</b>',
type: 'button-balanced',
onTap: function(e) {
$state.go('home.app');
}
},
]});
If I directly launch it from Controller-1 for the first time, it works as expected:
Screenshot - Normal Case
But, if I move to Controller-1 from any other state through a state change using $state.go('xxx.xx.x'), it shows broken output:
Screenshot - Failing Case
Make a function like this for your popup and Call that Function in your success callback function and make sure you have this code in the same controller in which success callback is written
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Title',
template: 'Are you sure?'
});
confirmPopup.then(function(res) {
if(res) {
console.log('Sure!');
} else {
console.log('Not sure!');
}
});
};
Refer this link for more details on Ionic Popup
I can't seem to work out how to redraw my Angular-Datatable after I delete a record from my database. I don't get any errors, but the table never seems to redraw unless I manually refresh the page. I have been trying to work with many examples from the website documentation.
I have my datatable:
$scope.dtInstance = {};
$scope.selectedItems = [];
$scope.toggleItem = toggleItem;
$scope.reloadData = reloadData;
// Build the User table
$scope.dtOptions = DTOptionsBuilder
.fromFnPromise(function() {
var deferred = $q.defer();
deferred.resolve(users);
return deferred.promise;
})
.withBootstrap() // Style with Bootstrap
.withOption('responsive', true)
.withDisplayLength(15) // Show 15 items initially
.withOption('order', [0, 'asc']) // Sort by the first column
.withOption('lengthMenu', [15, 50, 100]) // Set the length menu items
.withOption('createdRow', function(row, data, dataIndex) {
// Recompiling so we can bind Angular directive to the DT
$compile(angular.element(row).contents())($scope);
})
.withOption('headerCallback', function(header) {
if (!$scope.headerCompiled) {
// Use this headerCompiled field to only compile header once
$scope.headerCompiled = true;
$compile(angular.element(header).contents())($scope);
}
})
.withOption('fnRowCallback', formatCell);
$scope.dtColumns = [
DTColumnBuilder.newColumn(null).withTitle('Username').withClass('col-md-2').renderWith(createUsernameHyperlink),
DTColumnBuilder.newColumn('Email').withTitle('Email'),
DTColumnBuilder.newColumn('Level').withTitle('Role').withClass('col-md-2'),
DTColumnBuilder.newColumn('LastConnected').withTitle('Last Accessed'),
DTColumnBuilder.newColumn('Verified').withTitle('Account Verified').withClass('col-md-2'),
DTColumnBuilder.newColumn(null).withTitle('')
.notSortable()
.renderWith(function(data, type, full, meta) {
return '<input type="checkbox" ng-click="toggleItem(' + data.Id + ')" />';
}).withClass("text-center")
];
// Reload the datatable
function reloadData() {
var resetPaging = false;
$scope.dtInstance.reloadData(callback, resetPaging);
};
function callback(json) {
console.log(json);
};
And then I have my delete function that sits in the same controller. Calling reloadData() on a successful response from the service. I can see from the console.log that it is calling the function correctly, but nothing happens.
$scope.deleteUser = function( selectedItems ) {
swal({
title: 'Are you sure?',
text: 'Are you sure you want to delete the selected account profile(s)? This process cannot be undone...',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Delete',
confirmButtonColor: "#DD6B55",
closeOnConfirm: false,
allowEscapeKey: true,
showLoaderOnConfirm: true
}, function() {
setTimeout( function() {
// Delete user
UsersService.deleteUser( selectedItems.toString() )
.then(function( data ) {
// Show a success modal
swal({
title: 'Success',
text: 'User has been deleted!',
type: 'success',
confirmButtonText: 'Close',
allowEscapeKey: false
}, function() {
reloadData(); //<== Calls the function but doesn't do anything
//$state.go('users');
});
}, function() {
// Show an error modal
swal({
title: 'Oops',
text: 'Something went wrong!',
type: 'error',
confirmButtonText: 'Close',
allowEscapeKey: true
});
});
}, 1000);
});
};
Just wondering if I have missed some step?
As suggested by #davidkonrad in a previous comment and more so from the Angular-Datatable's author, I was not reloading my content when attempting to redraw my table. Even though I was referencing my data (users) from an injected service, it was never getting updated within the controller and so my table content was never differing.
The author suggested that it is preferable to load the data from a promise that makes a HTTP request, thus allowing further calls to the promise each time the table redraws.
So instead of this:
// Build the User table
$scope.dtOptions = DTOptionsBuilder
.fromFnPromise(function() {
var deferred = $q.defer();
deferred.resolve(users);
return deferred.promise;
})
.withBootstrap() // Style with Bootstrap
I changed it to this:
// Build the User table
$scope.dtOptions = DTOptionsBuilder
.fromFnPromise(function() {
return UsersService.getUsers();
})
.withBootstrap() // Style with Bootstrap
Which now updates my table fine upon each redraw event with a call to $scope.dtInstance.reloadData();
My Github post can be found here
setTimeout function works from outside of the angular digest cycle since it's async. If you want actions you take inside a timeout to apply to the angular digest cycle you should use $timeout instead.
Another option is to use $scope.apply(), but this will just mimic the $timeout function.
Please note that you'll need to inject $timeout to your controller.
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 Malhar AngularJS Dashboard Framework located here on github: https://github.com/DataTorrent/malhar-angular-dashboard , and a simple demo here: http://datatorrent.github.io/malhar-angular-dashboard/#/ .
Their system uses JQuery Sortable Widgets, which allows me to load up some charts and grids into a dashboard.
The way I load my charts and grids is by using their templateUrl property on the widget definition, as follows :
{
name: myWidgetEnum.TREELIST,
title: 'Tree List',
templateUrl: 'app/shared/gadget-templates/tree-list.html'
}
Here's a more complete sample of the Malhar Widget Definitions, which is where I define my UI "gadgets" to be rendered within the sortable widgets :
(function () {
'use strict';
angular.module('rage')
.factory('widgetDefinitions', ['ColumnChartDataModel', 'TreeListDataModel', 'TreeMapDataModel', 'GridDataModel', widgetDefinitions])
var myWidgetEnum = Object.freeze({
TREELIST: 'chart_treelist',
TREEMAP: 'chart_treemap',
HEATMAP: 'chart_heatmap',
GRID: 'chart_grid'
});
/* Define the widget definitions - base properties are defined in WidgetModel factory.
*/
function widgetDefinitions(ColumnChartDataModel, TreeListDataModel, TreeMapDataModel, GridDataModel) {
var size = { width: '20%', height: 90 };
var fixedSize = { width: '50%', height: 320 }; // keep height as a number, and add 'px' in directive
var initImagePath = 'images4/256x256/';
return [
{
name: myWidgetEnum.TREELIST,
title: 'Tree List',
templateUrl: 'app/shared/gadget-templates/tree-list.html',
dataModelType: TreeListDataModel,
dataModelOptions: {}, // this property will be persisted in DashboardState factory
gadgetType: 'table',
chartType: 'treelist',
settingsModalOptions: { }
},
{
name: myWidgetEnum.HEATMAP,
title: 'Heat Map',
templateUrl: 'app/shared/gadget-templates/grid.html',
dataModelType: GridDataModel,
dataModelOptions: {}, // this property will be persisted in DashboardState factory
gadgetType: 'table',
chartType: 'heatmap',
settingsModalOptions: {} // see 'MainCtrl' controller
}
];
}
})();
And the dashboard options in my main controller :
$scope.dashboardOptions = {
widgetButtons: false, // 'false' makes it a dropdown of options
widgetDefinitions: widgetDefinitions, // see dashboard-widget-factory.js
defaultWidgets: defaultWidgets,
storage: $window.localStorage,
storageId: $scope.defaultDashboardId, // 'rage.ui' - no longer hard code the storage Id - 06/11/2015 BM:
hideWidgetSettings: false,
settingsModalOptions: {
templateUrl: 'app/shared/include/gadget-config-new/gadget-config-container.html',
controller: 'GadgetSettingsCtrl_NEW as settings',
backdrop: true
},
onSettingsClose: function (result, widget) {
jQuery.extend(true, widget, result);
widget.dataModelOptions = result.dataModelOptions;
},
onSettingsDismiss: function (reason) {
console.log('widget settings were dismissed. Reason: ', reason);
}
};
When Malhar first loads up the widgets, it compiles the templateUrl within the JQuery sortable widget.
However, if I launch the widget settings modal and choose a different "widget" from the Widget Definitions list, I'm having an issue when I try to recompile the new templateUrl.
In other words if the first widget loaded up is the TREELIST, then in it's modal settings I choose a new widget called HEATMAP, I need to somehow force a recompile on the new html template that was loaded by Malhar.
Here on github, you can find the main directive, malhar-angular-dashboard.js https://github.com/DataTorrent/malhar-angular-dashboard/blob/master/dist/malhar-angular-dashboard.js , and if you search down for the 'DashboardWidgetCtrl' controller you'll find the $scope.makeTemplateString function as well as the $scope.compileTemplate function further below that.
I'm experimenting with the resolve section of the $modal instance as follows, but this seems to be more of a hack than an elegant solution:
See the angular.element below inside the try...catch section :
// Set resolve and reject callbacks for the result promise
modalInstance.result.then(
function (result) {
// Call the close callback
onClose(result, widget, scope);
// CHECK IF FIRST TIME CONFIGURING THE GADGET - 04/22/2015 BM:
if (!widget.gadgetConfigured) {
widget.gadgetConfigured = true;
widget.setHeight(widget.fixedSize.height);
widget.setWidth(widget.fixedSize.width);
}
scope.$broadcast('widgetSettingsClosed', widget, result);
//AW Persist title change from options editor
scope.$emit('widgetChanged', widget);
// hack to recompile the widget if user has swapped gadget types in gadget config modal - 10/01/2015 BM:
if (widget.chartType == "heatmap" || widget.chartType == "treelist") {
try {
angular.element(document.getElementById('dash')).scope().$$childHead.compileTemplate();
} catch (e) {
console.log("In modalInstance.result.then, cannot compile template " + e);
}
}
},
function (reason) {
// Call the dismiss callback
onDismiss(reason, scope);
}
);
If there's anyone with experience in Mahlar Dashboard, or in compiling directives, I would appreciate any guidance in this area.
thank you,
Bob
I'm trying to integrate Angular Bootstrap Calendar to my Laravel 5 project. Right now, the calendar works using the provided pre-populated demo list of events.
vm.events = [
{
title: 'An event',
type: 'warning',
startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
draggable: true,
resizable: true
}, {
title: 'Event 2',
type: 'info',
startsAt: moment().subtract(1, 'day').toDate(),
endsAt: moment().add(5, 'days').toDate(),
draggable: true,
resizable: true
}, {
title: 'This is a really long event title that occurs on every year',
type: 'important',
startsAt: moment().startOf('day').add(7, 'hours').toDate(),
endsAt: moment().startOf('day').add(19, 'hours').toDate(),
recursOn: 'year',
draggable: true,
resizable: true
}
];
I would like to retrieve and format the events from my database like the example above, but I'm not sure how to tackle this from my controller.
On the Angular Calendar side, I've read that I can use the angular $http service to load the events, like this:
$http.get('/events').success(function(events) {
//TODO - format your array of events to match the format described in the docs
$scope.events = events; //Once formatted correctly add them to the scope variable and the calendar will update
});
Any help would be greatly appreciated
What you would want to do is create a service that takes care of all the HTTP request/response handling and have your controller consume it to get/save/update data. Something like:
// assuming that you have a REST service endpoint at /events
// create your service that will handle all HTTP interaction for the events resource
app.factory('EventsService', ['$http', function($http) {
return {
getAll: function() {
// fetch all events asynchronously
return $http.get('/events').success(function(response) {
var events = response.data;
// if you need to do any pre-processing of the events first, do it here
// pass your events to the next function in the promise chain.
return events;
}, function(err) {
// handle errors here
// pass your error object down the chain in case other error callbacks are added later on to the promise.
return err;
});
}
};
}]);
app.controller('YourController', ['$scope', 'EventsService', function($scope, EventsService) {
// call the asynchronous service method and add your promise success callback that returns your array of events to be bound to your context.
EventsService.getAll().then(function(evts) {
$scope.events = evts;
}, function(err) {
// do any additional error handling here
});
});