I need to load data from the server on page change event of datatables.I am using angular-datatables.min.js. but can not seem to latch on to the page.dt event of the datables through angular scope. Please help me on this.
Not sure if you got it working- but this is what I just had to do. Might not be the most elegant but I am able to catch the colum-sizing.dt event:
$scope.$on('event:dataTableLoaded', function (event, loadedDT) {
// loadedDT.DataTable is the DataTable API instance
// loadedDT.dataTable is the jQuery Object
loadedDT.DataTable.on('column-sizing.dt', function(e, settings) {
console.log('WOOOHOOOO');
});
});
I catch the angular-datatables event that gets fired when a data table is loaded and then I bind the data tables events on it there.
Related
I am using AngularJS 1.3. Assume I have created several routes in my application. But when user hits a specifc route/url & then tries to move to another route/url, I want to fire some event. I do not want to fire this event on every URL change.
So only when user comes out of this url http://localhost:9000/data/55677c/edit, I want to fire one function available in XYZ controller.
Here is my scenario:
I have a page which looks like this:
<div class="well">
<button id='edit-btn' type="button" ng-click='saveContent()'>
<div ng-include="'components/grid/comOne.html'"></div>
</div>
components/grid/comOne.html page contains one grid and it has its own controller which takes care of data management of the grid.
This grid is shown in two pages. One in editable mode and one is non-ediatble mode. While user is in editable mode and try to move out of the page without saving the info, I need to fire an event in order to discard ant changes user has made to the grid data.
Please suggest
If the listening controller is a parent controller you could $emit the event.
Or you could have a common service like this:
angular.module('x').factory('CommonLogic', function(){
var pageChangeListeners = [];
return {
listenToPageChange: listenToPageChange
};
function listenToPageChange(callback){
pageChangeListeners.push(callback);
}
function pageChanged(){
for(var i = 0; i < pageChangeListeners.length; i++){
pageChangeListeners[i]();
}
}
});
then when leaving that url (track that via $routeChangeStart) you can call: commonLogic.pageChanged()
In the controller where you want to take action just:
commonLogic.listenToPageChange(function(){..}).
Obviously this should be improved to avoid duplicate registration of the listener ... etc.
I hope I'm not overcomplicating this. Could you describe your use case in more detail ?
I guess you want to use $routeChangeStart:
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
});
You can put this in the scope of your current controller which might be edit as your url says.
From the docs:
$routeChangeStart
Broadcasted before a route change. At this point the route services starts resolving all of the dependencies needed for the route change to occur. Typically this involves fetching the view template as well as any dependencies defined in resolve route property. Once all of the dependencies are resolved $routeChangeSuccess is fired.
The route change (and the $location change that triggered it) can be prevented by calling preventDefault method of the event. See $rootScope.Scope for more details about event object.
Type:broadcast
Target:root scope
I am looking for a way to know the source of the event in angularjs routing. Here is the scenario I am trying to solve. When url changes I want to know whether the change was caused by a browser back button or not. I thought I can do like this
$scope.$on('$routeUpdate', function (event) {
//if source is back button do this stuff
// if not do this
});
But the event object doesn't have a source information. Did I miss something here? Is there a better way to do it?
Instead of $routeUpdate use '$locationChangeStart'
Here's the discussion about it from the angularjs guys: https://github.com/angular/angular.js/issues/2109
Example:
$scope.$on('$locationChangeStart', function(event) {
if ($scope.form.$invalid) {
event.preventDefault();
}
});
I found one weird issue while working in angular js
I am getting data using ajax call. I am binding data to $scope object but view is not getting updated after data bind
following is my code
$scope.getPlanDetail = function (){
$rootScope.planBody.checkUpdate= false;
$http.post('http://MyServerURL',JSON.stringify($rootScope.planBody)).
success(function(response){
$scope.dataVal = response;//Able to view data in console;
console.log($scope.dataVal)//data json shown in log window
localStorage.setItem("tempDataVal", JSON.stringify(response));//able to set data in localStorage;
}
}
getPlanDetail() function is getting called on btn click using ng-click
Same functionality I have done in other case(using get method.) where code is working properly. The only diff I found is that current AJAX call is taking to much of time because of too much of server side processing and its post method I am not sure whether this(using post method) is causing issue in binding
On same view(.html) I added dummy button ng-click event. After ajax success call I click on button and view is loaded because of data use from localStorage variable.
$scope.dummyClick= function(){
console.log($scope.dataVal);//giving Undefined
$scope.dataVal = JSON.parse(localStorage.getItem("tempDataVal"));// this time view binded properly.
}
I didn't understand why data is not bind to view in success method. Does the $scope time out after some time if server takes too much time to respond?
Thanks in Advance.
If you are changing the model inside an ajax call then you need to notify the angular js that you have some changes.
$scope.$apply(); after the below line will fix your issue. This line will update the scope.
$scope.dataVal = response;
Thanks,
Santyy
I need to insert css/js before view content is assigned.
$stateChangeStart, $stateChangeSuccess, $viewContentLoaded aren't figuring out my problem.
I want to write code like this:
$rootScope.$on('$beforeInsertHtml', function(event, state) {
if (state.files) {
updateFiles(state.files); // my loader
}
});
Any solutions?
Looks like I need to change source code and add additional event.
try with $viewContentLoading, this event is broadcasted by $view low-level service
How we can track the status of view render in backbone marionette.
for example view need to fetch some data from server to render it.
App.main.currentView.ChatContactRegion.show(new ChatContactsView());
Here how I can check, whether view rendered successfully to given region? Is there any callback for show function?
Thanks
Peter
A region manager will raise a few events during it's showing and closing of views:
So, in your example, the ChatContactsView instance passed to show() will have an onShow event triggered.
You can hook into that event in your ChatContactsView class definition:
ChatContactsView = Marionette.ItemView.extend({
onShow: function(){
// called when the view has been shown
}
});
More detail in the docs