I have 2 page who use the same template, I want to reload the template when I go from the page2 to page1 by using this._router.navigate().
the page2 use the page1 as a directive,
I want to do that
let link = "/contrat/" + num
this._router.navigate(link)
and be equivalent to a window.location.href
I want to force the template to reload.
thank's
This question is a little confusing but it looks like you syntax may be wrong. It should look something like this...
this.router.navigate(['page2']);
and make sure you define that path within a RouterConfig, for example
{path: 'page2', component: page2Component},
Related
I know there are similar questions answered to this question, but none of the solutions worked for me. I have the following folder structure:
static
----calendar
--------calendar.controller.js
--------calendar.view.html
----home
--------home.controller.js
--------home.view.html
----app.js
----index.html
Inside calendar.controller.js I have created a directive for my calendar that looks like this:
.directive('myCalendar',function(){
return{
restrict:'E',
template:"calendar.view.html"
}
})
I am trying to render that calendar template from home.view.html without success.
I have this in my home.view.html:
<my-calendar></my-calendar>
On the browser it actually displays the path I am trying to make him bind (on the browser you can see "./calendar/calendar.view.html"). And I've tried changing the directive's path in many ways:
- template:"./calendar.view.html"
- template:"/calendar.view.html"
- template:"./calendar/calendar.view.html"
- template:"/calendar/calendar.view.html"
... but it still won't work. Thank you.
template:"calendar.view.html"
that is a mistake
you need templateUrl:"calendar.view.html"
instead
I'm trying to make a react-router app that animates page transitions using ReactCSSTransitionGroup, but I can't figure out how to dynamically set transitionName so that I can use different animations depending on the route I am trying to go to. For example, I want root routes to fade between each other, but children routes should slide in/out - aka, I want it to work like a native app.
When using the code:
<ReactCSSTransitionGroup
transitionName={transitionValue}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
...
</ReactCSSTransitionGroup>
How can I make transitionValue something that can either be set by a Link component or based on the route that is loaded? I'm not sure the best way to do this.
Thanks for any help!
I'm not sure if it's the best option, but I added query to the Link and then accessed it via this.props.location.query.tran
<ReactCSSTransitionGroup
transitionName={this.props.location.query.tran || 'fade'}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
...
</ReactCSSTransitionGroup>
And the link looks like this:
<Link to={{ pathname: '/role/1', query: { tran: 'coverLeft' }}}/>
Hope this helps someone. Or, if anyone has a better approach, I'd love to hear it as I don't love that my solution dirties the URL a bit.
I have a template html page(say Index page) containing a header and three other pages and i want that Header on first two pages but not on third page .Using angularjs routing I am able to have that header on all three pages but cant hide that header from the third page.The pages have different controllers as well .Can anybody help me how to achieve this.
This is not a good practice, not at all! But as your question lacks of code...
You say "The pages have different controllers", so let's say you have PageOneCtrl, PageTwoCtrl and PageThreeCtrl.
If you want to show the header on the page with controllers, let's say: PageOneCtrl and PageTwoCtrl, set a $scope (remember you have to define $scope on that controller first) variable just like:
$scope.showHeader = true;
And in PageThreeCtrl (where you want to HIDE the header element) write
$scope.showHeader = false;
Then in the html you should write:
<header ng-if="showHeader">This is your header content</header>
the ng-if will do the trick, check angularjs documentation for more information: https://docs.angularjs.org/api/ng/directive/ngIf
Doesn't work? Try $rootScope instead of $scope, but watch out! If you use $rootScope then you should declare that variable on every controller.
This is not a good practice, not at all! But as your question lacks of code...
A better practice, and one of the bests in my opinion, would be to use angular-ui-router and set a data attribute to the state (route) with something like
.state('myRoute', {
templateUrl: 'views/my-route-view.html',
controller: 'MyrouteCtrl',
data: {
hideHeader: true;
}
})
, in a .run() function set something like $rootScope.$state = $state (read more about it in the ui.router docs) and then simply: <header ng-if="!$state.current.data.hideHeader">. But I believe you're not an advanced developer to do it :) So keep learning.
I want to implement AngularJS's ng-include statement into my website to reduce code redundancy, but having trouble getting it to fully work. Currently, my index.html page is calling pageLayout.html My index.html is calling pageLayout.html successfully, but when adding a <h1> tag in index.html I cant put it on top of the pageLayout.html content that I call. Does anyone have any ideas?
Here is the link: http://plnkr.co/edit/uarelZgzmITJXg2pYXfg?p=preview
I have also tried using a directive like the following: http://plnkr.co/edit/VmAO47l7RMXTGYYFFgLB?p=preview but still having issues.
Thanks!
The transclusion strategy is set to element not to true so you can not insert extra content.
Moreover the content is wiped everytime the template value changes
And using transclusion with ngInclude does not make sense
I would rather use a directive with transclusion (or bind the title) if you want to avoid code duplication, something like
directive('pageContainer',function(){
return {
template:'<div class="divSize" ><h1>{{title}}</h1><div ng-transclude></div></div>',
scope:{
title:"#"
}
}
})
In a SPA, using a navigation framework such as Sammy.js, how could I use in page named anchors for in-page navigation?
e.g. Say I have a route like localhost/myapp/#/somerecord/1 where the application loads somerecord with id = 1.
However somerecord is really complicated and long. I want to be able to jump to a certain section using a named anchor.
Say an article element is defined like <article id=section-d> ... </article> and I just link to like <a href=#section-d>Section D</a> it technically works, but the URL reads like localhost/myapp/#section-d, this breaks the navigation stack. Hitting the Back button takes me back to localhost/myapp/#/somerecord/1 and without jumping back to the top.
The preferred action would be to either jump back to the top or to the previous page. Any ideas on how to accomplish this?
Effectively, you have to define your URL as a regular expression, and allow an optional bookmark hash at the end of it; something like:
get(/#\/somerecord\/(\d+)(#.+)?/, function() {
var args = this.params['splat'];
var recordId = args[0];
var articleId = args[1];
});
This should match any of the following routes:
#/somerecord/1
#/somerecord/1# (treated as if there is no article id)
#/somerecord/1#section-d (articleId = '#section-d')
You should then be able to use the articleId to find the matching element and manually scroll. e.g. in the last route above, using jQuery you could do something like:
var $article = $(articleId);
$(document.body).animate({ scrollTop: $article.offset().top });
});
I've just written up a more comprehensive article about this (using Durandal), if you're interested: http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/
Edit
Link is dead. The article available here http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/
I've had the same problem using durandal with sammy.js. Basically, you have to create a (invisible) route for each anchor you want on your page. See a post from me about the solution I found: http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html