It might sound a bit complicated.
This is SinglePage, pushState enabled application. I have a route, for configuration:
routes: {
'': 'dashboard',
'configure/sites/:id': 'configure',
'configure/sites/:id/:section': 'configureSection'
},
I'm using tbranyen/backbone-boilerplate way to navigate the urls. If I click a href from a dashboard a href="configure/sites/33, view rendered fine. In browser URL I can see, `localhost:12345/configure/sites/33'.
On configure view I have a menu, with some <a href= inside.
<ul class="nav configure-nav">
<li>
Overview
</li>
<li>
Configuration
</li>
The problem is, if I try to hit those links, the id goes away.
Expected href: http://localhost:12345/configure/sites/33/configuration
Actual href: http://localhost:12345/configure/sites/configuration
Could you please explain what happening and how to fix it?
I don't know if this will fix your problem but if you're making a single page app, you should put a hashbang after "localhost:12345/" or all those requests will get sent to the server.
This is due to the way relative and absolute links work. In your case the hrefs are relative to the closest "directory" in your path (to keep the file system analogy the :id part can be seen as a file).
If you add a trailing slash to your routes the overview and configuration links will be rooted properly.
Related
props.repo.html-url is returning https://github.com/mojombo/docz-website
Problem is when I click on link it goes to this URL: http://localhost:3000/user/https://github.com/mojombo/docz-website
I want to redirect to first URL, why it is behaving like this?
Just use a simple anchor tag in this case, as you are linking an external page and not a route defined whitin your application.
<a href={props.repo.html-url} rel="external">
{props.repo.name}
</a>
I'm new to angularjs and have been scouring for an answer to this problem but to no luck I can't find one.I know that angular (1.x) is older but I still wanted to learn this anyway.
Moving on, I'm trying to dynamically generate links based on a $scope.menu_item object inside a controller of my module. For example if
$scope.menu_items = ['Home','Profile','Settings']
the values in the array correspond to child states of parent state User and is configured using $stateProvider.state()
$stateProvider
.state('user'{
url:'/user',
abstract:true,
templateUrl:'someTemplateThatSeemsToWork',
controller:'MenuCtrl'})
//these are the child states
.state('user.Home',{
url:'/home',
template:'<p>Home</p>' (this is loaded in the template of its parent)
})
.state('user.Profile',{
url:'/profile',
template:'<p>Profile</p>'
})
.state('user.Settings',{
url:'/settings',
template:'<p>Settings</p>'
})
then this in the template using ng-repeat:
<li ng-repeat="menu_item in menu_items">
<a ui-state="user.{{menu_item}}">{{menu_item}}</a>
</li>
As expected, it renders the view properly, the values from $scope.menu_items are properly made into links but the href="" attribute of the tag is equal to the current url.
The default state is 'user.Home' and as such /user redirects to /user/home
(localhost:[port]/user/home)
<a ui-state="user.Home" class="ng-binding" href="/user/home">Home</a>
...
<a ui-state="user.Profile" class="ng-binding" href="/user/home">Profile</a>
...
<a ui-state="user.Settings" class="ng-binding" href="/user/home">Settings</a>
Here we see that all of the generated tags have the href value set to the current url (localhost:[port]/user/profile will make it into href="/user/profile")
So is there anything that I'm forgetting to do? From my understanding, it should work when I use ui-state since it can handle $scope properties.
Some additional notes:
1.) Manually typing the specified state url in the address bar works just fine and renders the correct template
2.) I am using Express to handle the server-side
3.) I set $locationProvider.html5Mode(true)
Temporary Work-around
For the people who might stumble upon this question, I temporarily used a work-around solution and just removed ui-sref="" or ui-state="" and just used
ng-href={{state.url}}
with
ng-repeat= "state in states"
where
states = [{name="stateName", url="/relativeToRootUrl"},{..more States}]
I'd still appreciate a solution for this using ui-sref since it utilized ui-router more.
How do we tell Angular not to try to go to a route if we simply have an anchor such as:
Home
When we click on "Home" we're just simply hiding/showing div sections on the current view with CSS but as stated, Angular thinks we're going to a specified route which we may have set up in app.js or something.
Any ideas?
Thanks much,
David
This is due to angular link rewriting explained here: https://docs.angularjs.org/guide/$location
Add target="_self" to the link to prevent it.
You should also consider Angular Directives for Bootstrap. https://angular-ui.github.io/bootstrap/
Use data-target instead of href to specify the target id
<a data-target="#home" data-toggle="tab"> Home </a>
I have a page /hello where i have a link:
<a href="{{#url 'goodbye' }}{{/url}}">
that will redirect to /goodbye. But i want it to use an anchor too, something like /goodbye#message
I have tried doing:
<a href="{{#url 'goodbye' }}{{/url}}#message">
but when I click on it, it will redirect the page to /goodbye. It seems like Chaplin is deleting the anchor.
EDIT:
For the templates I'm using handlebars (with the chapling boilerplate), the {{#url}} helper generates correctly the link ( cf view-helper.js ). In the rendered page i see:
<a href="/goodbye#message">
but when i click on it, it just redirects me to /goodbye
Any idea?
Found a solution, I needed to stop the routing on the link. I just added the class noscript on the tag
<a href="{{#url 'goodbye' }}{{/url}}#message" class="noscript">
I couln't find a different way to do it. Hope this helps someone else
cf : skipRounting on Chaplin.Layout
I have a click button. I am trying with angularjs. The page anchors at the top of the page, when I click it. How do I to stay at the same place in the browser when I click it?
<a href="#" ng-click="myFunction()">
{{_actions.refresh}}
</a>
There is a similar question here. But with jQuery solution described there. I would like to find a solution with angularjs.
<a ng-click="myFunction()">
{{_actions.refresh}}
</a>
Just remove href completely.
So, the "right" way to do it would be something like this:
<a name="myFunction"></a>
<a href="#myFunction" ng-click="myFunction()">
{{_actions.refresh}}
</a>
That way you could have some extra functionality in terms of someone sending that link, or someone visiting the page without JavaScript (have you thought about that experience yet?).
I obviously don't know your applications, but putting a name tag in there might be a helpful thing on several levels.