How to make a link button in Angularjs

Asked

Viewed 3,995 times

2

How to make a link/redirect button in Angularjs?

html

<button class="btn btn-success" href="go('/cadastro.html')">Cadastra-se</button>

config

app.config(function($routeProvider, $locationProvider){

    .when('/', {
      templateUrl : 'views/login.html',
      controller     : 'LoginCtrl',
    })

    .when('/cadastro', {
      templateUrl : 'views/cadastro.html',
      controller     : 'CadastroCtrl',
    })

});
angularjs

4 answers

3


As far as I know, the tag button does not have the attribute href.

Another point, if you want to navigate to the route /register , you need to change your location for '/register' , removing the HTML from the path. Remember that you are accessing a route, not a physical path to your HTML.

If you use the code below, you must access the route '/register' as configured in your module.

<a class="btn btn-success" href="#/cadastro')">Cadastra-se</a>

If you want to use a button accessing a method from your controller, you should do similar to the code below:

<button class="btn btn-success" ng-click="go(/cadastro)">Cadastra-se</button>

And in your controller:

$scope.go = function(path){
     $location.path(path);
}

The object $Location should be included as a dependency on the above code. It aims to give you an interface to access the browser URL. Any modifications made to the URL will reflect on the object $location, and vice versa.

  • Dude, I got it using the <a class="btn btn-Success" href="#/register')">Register</a>, but the other one, I tried to do what you said and it didn’t work. Which controller do you refer to? Cadasctrl?

  • @Gustavosevero in the controller to which your button belongs. If your button is inside a div <div ng-controller"Cadasctrl">[...] then yes, in Cadasctrl

0

would look like this:

<button class="btn btn-primary" ui-sref="cadastro" >
  <span class="glyphicon glyphicon-plus"></span>
  <span >
    Cadastrar
  </span>
</button>

It will use your specified rout in your config to redirect.

0

This code is almost ready. Just add the function in the controller to change route:

$scope.go = function ( path ) {
    $location.path( path ); 
 };

But, since apparently you are using bootstrap, I believe it is possible to use the tag instead of button, this way:

<a class="btn btn-success" href="cadastro.html'">Cadastra-se</a>

So you don’t need the function in the controller.

0

Vanilla

Via Javascript

<input type="button" 
    onclick="location.href='http://servidor.com.br';" 
    value="Visitar servidor.com.br" 
/>

Via form action

<form action="http://servidor.com.br">
    <input type="submit" value="Visitar servidor.com.br" />
</form>

Angular

Via directive:

.directive( 'goClick', function ( $location ) {
  return function ( scope, element, attrs ) {
    var path;

    attrs.$observe( 'goClick', function (val) {
      path = val;
    });

    element.bind( 'click', function () {
      scope.$apply( function () {
        $location.path( path );
      });
    });
  };
});

Use:

<button go-click="http://servidor.com.br">Visitar servidor.com.br</button>

(Source)

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.