Есть ли простой способ использовать кнопку для навигации по странице, как ссылку в angularjs

В angularjs, я хочу использовать button, как это, но мне все еще нужна кнопка, выглядящая.

<button href="#/new-page.html">New Page<button>

Как a (ссылка) делает

<a href="#/new-page.html">New Page</a>

Существует ли более простой способ?

<button ng-click="newPage()">New Page<button>
$scope.newPage = function (){
    location.href = '#/new-page.html';
};

Примечание. В то же время, когда я использовал location.href для навигации, все обновляется, и навигация не находится под контролем угловых. Если я не использую ссылку, как перемещаться по странице в javascript-коде?

Нужно ли мне создавать настраиваемую директиву для имплементации?

Ответы

Ответ 1

Ваш ngClick правильный; вам просто нужен правильный сервис. $location - это то, что вы ищете. Ознакомьтесь с документами для получения полной информации, но решение вашего конкретного вопроса таково:

$location.path( '/new-page.html' );

Служба $location добавит хэш (#), если она будет соответствовать вашим текущим настройкам и не запустится перезагрузка страницы.

Вы также можете сделать что-то более гибкое с директивой, если вы так выбрали:

.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 );
      });
    });
  };
});

И тогда вы можете использовать его во всем:

<button go-click="/go/to/this">Click!</button>

Существует много способов улучшить эту директиву; это просто показать, что можно сделать. Здесь Plunker демонстрирует это в действии: http://plnkr.co/edit/870E3psx7NhsvJ4mNcd2?p=preview.

Ответ 2

Если вы в порядке, немного потрошив свою разметку, вы можете сделать это простым способом и просто привяжите <button> к привязке (<a>).

<a href="#/new-page.html"><button>New Page<button></a>

Кроме того, нет ничего, что помешало бы вам укрепить привязку привязки, чтобы выглядеть как <button>

как указано в комментариях @tronman, это технически не актуально html5, но это не должно создавать никаких проблем на практике

Ответ 3

С помощью бутстрапа вы можете использовать

<a href="#/new-page.html" class="btn btn-primary">
    Click
</a>

Ответ 4

Вы также можете зарегистрировать $location в области в контроллере (чтобы сделать его доступным из html)

angular.module(...).controller("...", function($location) {
  $scope.$location = $location;
  ...
});

а затем идите прямо к меду в свой html:

<button ng-click="$location.path('#/new-page.html')">New Page<button>

Ответ 5

 <a type="button" href="#/new-page.html" class="btn btn-lg btn-success" >New Page</a>

Простой...

Ответ 6

Для меня лучшим решением является использование Angular родных директив маршрутизатора с ui-sref, например:

<button ui-sref="state.name">Go!!</button>

Чтобы понять эту директиву и получить больше опций, посетите документы ui-router по адресу:

https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state.directive:ui-sref

:)

Ответ 7

<button type="button" href="location.href='#/nameOfState'">Title on button</button>

Еще проще... (обратите внимание на одинарные кавычки по всему адресу)