In angularjs, I want to use button
like this, but I still need the button looking.
<button href="#/new-page.html">New Page<button>
As a
(link) does
<a href="#/new-page.html">New Page</a>
Is there a simpler way than this?
<button ng-click="newPage()">New Page<button>
$scope.newPage = function (){
location.href = '#/new-page.html';
};
Note: Acutally, when I used to location.href
for navigation, the whole is refreshed and the navigation is not under the control of angularjs. If I don't use link, how to navigate page in javascript code?
Do I need to create a custom directive to impl it?
This question is related to
javascript
angularjs
<button type="button" href="location.href='#/nameOfState'">Title on button</button>
Even more simple... (note the single quotes around the address)
<a type="button" href="#/new-page.html" class="btn btn-lg btn-success" >New Page</a>
Simple...
If you're OK with littering your markup a bit, you could do it the easy way and just wrap your <button>
with an anchor (<a>
) link.
<a href="#/new-page.html"><button>New Page<button></a>
Also, there is nothing stopping you from styling an anchor link to look like a <button>
as pointed out in the comments by @tronman, this is not technically valid html5, but it should not cause any problems in practice
With bootstrap you can use
<a href="#/new-page.html" class="btn btn-primary">
Click
</a>
You can also register $location on the scope in the controller (to make it accessible from html)
angular.module(...).controller("...", function($location) {
$scope.$location = $location;
...
});
and then go straight for the honey in your html:
<button ng-click="$location.path('#/new-page.html')">New Page<button>
For me, best solution is to use Angular router native directives with ui-sref like:
<button ui-sref="state.name">Go!!</button>
To understand that directive and get more options visit ui-router docs at:
https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state.directive:ui-sref
: )
Source: Stackoverflow.com