CODEWITHSUNDEEP
htmlangularjsbutton
Saqib Ali
Saqib Ali

Reputation: 12535

How to get AngularJS link to look/act like a Button?

I have the following code in my AngularJS template:

<button class="submit-button" ng-click="myCtrl.doSomething1()">
    Do Something 1
</button>
<a class="submit-button" ui-sref="mystate({param1: 'a', param2: 'b'})">Do Something 2</a>

Here is the style:

.submit-button {
  color: black;
  font-weight: bold;
  text-align: center;
}

This is how it gets rendered:

enter image description here

I would like Do Something 2 to also appear and act as a button, just like Do Something1. But when clicked, it should send the user to the state specified in the ui-sref. How can I do it?

Upvotes: 0

Views: 918

Answers (1)

tmcc
tmcc

Reputation: 1020

enclose in button tag

 <a ui-sref="mystate({param1: 'a', param2: 'b'})"><button class="submit-button">test</button></a>

As Steve has mentioned, it is not valid html, but will work in most browser(for now)

You should be able to just apply the directive to a button element and it should work

   <button class="submit-button" ui-sref="mystate({param1: 'a', param2: 'b'})">test</button>

Example using button as outer div and anchor tag as outer div

Upvotes: 1

Related Questions