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
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();
}
});
Using Ionic, calling $rootScope.$broadcast("$ionicView.enter") will trigger all child views having an event handler for the $ionicView.enter event.
How can I narrow this down to target the handler for a specific view?
You haven't provided any code samples, but it sounds like what you are describing doesn't require triggering an event with specific data, but listening to the event w/ specific data.
Perhaps this snippet can help you:
$rootScope.$on( "$ionicView.enter", function( scopes, states ) {
//here's an example of storing network error state in rootscope
//and some random important state that requires your data to be refreshed
if( $rootScope.networkErrorOccurred && states.stateName == "myImportantState" ) {
//refresh data due to network error code goes here
}
});
When calling $rootScope.$broadcast("$ionicView.enter") the "states" object is none existent and hence you cannot rely on the stateName.
But, you can add it yourself, like so:
$rootScope.$broadcast('$ionicView.enter', {stateName: 'myImportantState'});
This will make Travis example working.
The other way I can think of is to save a reference to the view's scope and emit an event directly on it.
I must say I wouldn't recommend it, but maybe that's what you're looking for.
Inside the view's controller
app.controller('someViewCtrl', function($scope) {
//Save a reference to the view's scope, using window for brevity
window.someViewScope = $scope;
}
Somewhere else in the app
window.someViewScope.$emit('$ionicView.enter')
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.
I have a view which defines a change event on some select controls, but they don't seem to be firing. The view is something like this:
var FiltersView = Backbone.Marionette.ItemView.extend({
template: FiltersTmpl,
events: {
'change #panel_filters select': 'enableSearch'
},
enableSearch: function() {
debugger;
}
});
When I change the dropdown, enableSearch doesn't fire. However, using Chrome Dev Tools, I can use jQuery to setup an event handler like this $("#panel_filters select").change(function() { debugger; }); and that does in fact fire. So I know the selector is correct and the select is triggering a change event. I know it must be a simple syntax problem but it seems like the correct syntax to me.
Ok I figured it out. #panel_filters is actually the element that I injected my view into. Technically, it's considered outside the view. And apparently, view events are scoped to the view itself. Which is handy I suppose, but I didn't know that. Good to know :-)