After rendering a Backbone View I inject HTML generated with jQuery. This HTML also includes links within the application. If you click those links they reload the site.
How can I bind those links so they will trigger the router and don't reload the site?
You have to bind a click event to those links and call Router.navigate. It's important that you return false from your event handler as this will prevent the borwser to actually follow the link. Another important thing is to pass trigger: true to actually have your router execute (otherwise it will only change the url displayed in the address bar).
events : {
'click a.changeView' : 'changeView'
},
changeView : function(e) {
Router.navigate(e.target.href, { trigger: true });
return false;
}
Also, you might have to tweak your href a bit if it contains protocol, domain, etc... for instance if your href is http://mydomain.com/mypage you might need to pass only mypage to the router.
Related
I am trying to remember the scroll position of a page using that code:
$rootScope.$on('$locationChangeStart', function(angularEvent, nextRoute, currentRoute) {
$rootScope.scrollPosCache['dailyController'] = $window.pageYOffset;
});
When the page infinitely-scrolls I am using ui-router's transitionTo to modify the current url in the browser history like that:
$state.transitionTo('daily', { page: pageIndex }, { notify: false, location: 'replace' });
the transition changes the search string to e.g.: http://example.com/?page=1/2/3/4/etc
so, the $locationChangeStart code is running both when I make the transition and when the user leaves the list page to follow a link to a detail page.
How do I know the location change has come from a transition and not from a click through? (I only want to remember the scroll position when the page is left)
The solution is to use $stateChangeStart and not $locationChangeStart.
I have searched on StackOverflow for the last five hours and none of the related answers quite solve my problem. I have an UI-Router state that loads a long list of messages generated from a custom directive. This page is linked too in many places pointing to a different message. I want to scroll to the currently selected message.
I can get this to work using $anchorScroll if I surround the call with a $timeout. $timeout(function(){$anchorScroll()};) but if the $timeout is not there a call to $anchorScroll does nothing since the View has not completely loaded.
Here is most of the relevant code.
<message id='message{{message.id}}'
ng-repeat='message in messages'
message='message'
ng-class="{'current':current == 'message{{message.id}}'}" >
</message>
In the controller I set current to $scope.current = $location.hash(). This all works.
If I load the page like #/messages#message100 directly the page will correctly scroll. However, if from a different view I use the a link such as this:
<button ui-sref="message-state({'#':'message{{message.id}}'})>
Go To Message {{message.id}}
</button>
The page will not automatically scroll to the correct anchor since the message list has not been made yet. But by putting the call to $anchorScroll() in a $timeout I can make the page scroll.
I don't like using $timeout for this purpose. I know I am not supposed to manipulate the DOM in a controller like this.
I have tried registering the call to $anchorScroll() with many of the $stateProvider events such as:
$state.$on('$viewContentLoaded', function(event) {
$anchorScroll();
});
But even at the time the $viewContentLoaded fires the message list does not exist in the DOM and the page does not scroll.
IWhat is the best way to make the UI-Router scroll based on the $location.hash().
Even I was facing a similar situation and after days of try and error, I came up with this.
In ui router add an id parameter to the state on which you want to enable the scroll.
$stateProvider.state('index', {
url: '/',
params: {
id: null
}
})
Then in the html use ui-sref
<li><a ui-sref="index({id: 'about-us'})" >About Us</a></li>
At last in the app.run module detect the state change using
$rootScope.$on('$viewContentLoaded', function(event){
if ($state.current.name == 'index') {
if($stateParams.id) {
$anchorScroll.yOffset = 150;
$location.hash($stateParams.id);
$timeout(function(){$anchorScroll()}, 1000);
}
}
});
Hope this helps. Would do a plunkr if needed.
I've been playing with UI-Router since ngRoute doesn't quite cover what I needed based on my different layouts requiring multiple nested views. What I can't figure out in UI-Router is how to load default nested views without having to click a link. I created a crude example of what I'm mean in a plunker
Essentially there are two main route within each there is a container which hosts nested views. I want to load a default view into them without have to click a ui-sref.
<h1>Auth Panel</h1> <-- main route 1
Just a container for login/forgot/reset
<hr/>
<a ui-sref="auth.login">Show Login</a><br> <-- can click to load nested view, but want to autoload
How to show automatically /login within the panel <br>
without having to click show login?
<div ui-view></div> <-- child to autoload with /login
Thanks
On your parent state add a param
.state('parentState', {
//...
params: {
autoActivateChild: 'parentState.childState'
}
//...
})
And add this somewhere
$rootScope.$on('$stateChangeSuccess', function(event, toState){
var aac;
if(aac = toState && toState.params && toState.params.autoActivateChild){
$state.go(aac);
}
});
If you wanted to navigate automatically to a default child state when the parent loads, you could trigger a click on that particular ui-sref in your controller.
angular.element("#childElementId").trigger('click');
I have a service in which inside I bind a click event:
$('button').click(function() {
alert('Clicked');
return false;
});
The issue is when I do not start at the default "/" route (i.e. "/testroute"), then that same button when clicked, causes the page url to go to "/" and not fire my event at all. When I click on it again after the route changes to "/", the event triggers as normal. How do I make it such that if I were to start at /testroute (even though it has the same view, different controller, but shares the same service, the alert will fire?
Use locationChangeStart. Also read the link Andrey posted.
$rootScope.$on('$locationChangeStart', function(e) {
e.preventDefault();
});
You might want to use these events to prevent route changing.
I have a Backbone Marionette app which allows users to search using various criteria. From the search results they can click on a link which navigates them away from the backbone app to a standard static page.
How can I set things up so that when they click back in their browser, the backbone search page is restored back to their previous state (with search criteria and results intact)?
Thanks
You could use backbone router for your search page and save state in location.hash, so all population/rendering will be managed by router or views which will listen to router events:
"route:[name]" (params) — Fired by the router when a specific route is matched.
"route" (route, params) — Fired by the router when any route has been matched.
For example #search/query/nuggets will trigger this route:
'search/query/:query-string': function(query) {
yourCollection.fetch({data: {query: query}})
}
and in your view
initialize: function() {
this.listenTo(yourCollection, 'sync', this.render)
}
so then user click/or hit enter in your search field you just should trigger route change: yourRouter.navigate("search/query/"+yourQuery, {trigger: true})