Как / когда использовать ng-click для вызова маршрута?

242

Предположим, вы используете маршруты:

// bootstrap
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl'
    });
    $routeProvider.when('/about', {
        templateUrl: 'partials/about.html',
        controller: 'AboutCtrl'
    });
...

И в вашем html, вы хотите перейти к странице о том, когда нажата кнопка. Один из способов -

<a href="#/about">

... но, похоже, ng-click будет полезен и здесь.

  • Правильно ли это предположение? Использовать ng-click вместо привязки?
  • Если да, то как это будет работать? IE:

<div ng-click="/about">

Теги:
routes
angularjs-ng-route
angularjs-routing
angularjs-ng-click

5 ответов

415
Лучший ответ

Маршруты контролируют службу $location и реагируют на изменения в URL (обычно через хеш). Чтобы "активировать" маршрут, вы просто меняете URL-адрес. Самый простой способ сделать это - привязать теги.

<a href="#/home">Go Home</a>
<a href="#/about">Go to About</a>

Ничего сложнее. Если, однако, вы должны сделать это из кода, правильным способом является использование службы $location:

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

Например, кнопка может запускаться:

<button ng-click="go('/home')"></button>
Поделиться
  • 6
    Это не сработало для меня, но заменив $ location.hash (hash); с $ location.path (хеш); оно работает. Об этом говорит @sean в другом ответе, который почему-то имеет гораздо меньше голосов.
  • 2
    path и hash @PerQuestedAronsson служат двум различным целям, но в зависимости от обстоятельств могут иметь одинаковый эффект. В большинстве случаев для строгой маршрутизации (особенно с включенным html5mode ) path будет каноническим выбором. Я обновил ответ, чтобы отразить это.
Показать ещё 9 комментариев
76

Вот отличный совет, о котором никто не упоминал. В контроллере, который находится внутри функции, вам необходимо указать поставщика местоположения:

app.controller('SlideController', ['$scope', '$location',function($scope, $location){ 
$scope.goNext = function (hash) { 
$location.path(hash);
 }

;]);

 <!--the code to call it from within the partial:---> <div ng-click='goNext("/page2")'>next page</div>
Поделиться
  • 2
    хорошо, спасибо! этот ответ работал лучше для меня, потому что метод hash добавляет значения в URL (закодирован), а метод path позволяет мне заменить полный URL, это было то, что мне было нужно. Спасибо!
  • 8
    Это единственное предлагаемое решение на этой странице, которое действительно сработало. Не знаю, почему другой ответ имеет гораздо больше голосов, чем этот ..?
Показать ещё 1 комментарий
32

Использование настраиваемого атрибута (реализуемого с помощью директивы), пожалуй, является самым чистым способом. Здесь моя версия, основанная на предложениях @Josh и @sean.

angular.module('mymodule', [])

// Click to navigate
// similar to <a href="#/partial"> but hash is not required, 
// e.g. <div click-link="/partial">
.directive('clickLink', ['$location', function($location) {
    return {
        link: function(scope, element, attrs) {
            element.on('click', function() {
                scope.$apply(function() {
                    $location.path(attrs.clickLink);
                });
            });
        }
    }
}]);

У него есть некоторые полезные функции, но я новичок в Angular, поэтому есть возможности для улучшения.

Поделиться
  • 0
    Не создаст ли это событие click для элемента при каждом изменении атрибута clickLink?
  • 0
    @toxaq Это определенно не идеально. Я подозреваю, что при clickLink атрибута clickLink директива добавит новый обработчик clickLink , но оставит старый на месте. Результат может быть немного хаотичным. Первоначально я написал это для использования в ситуации, когда атрибут clickLink никогда не изменится, поэтому я никогда не связывал этот свободный конец. Я думаю, что исправление этой ошибки на самом деле привело бы к более простому коду - я мог бы попытаться сделать это, когда у меня будет время (ха!)
Показать ещё 4 комментария
4

Помните, что если вы используете ng-click для маршрутизации, вы не сможете щелкнуть правой кнопкой мыши элемент и выбрать "открыть в новой вкладке" или ctrl, щелкнув ссылку. Я пытаюсь использовать ng-href, когда приходит в навигацию. ng-click лучше использовать на кнопках для операций или визуальных эффектов, таких как сбой. Но   Около Я бы не рекомендовал. Если вы измените маршрут, вам может потребоваться изменить много места в приложении. Попросите метод вернуть ссылку. например: Около. Этот метод, который вы размещаете в утилите

Поделиться
1

Вы можете использовать:

<a ng-href="#/about">About</a>

Если вам нужна динамическая переменная внутри href, вы можете сделать так:

<a ng-href="{{link + 123}}">Link to 123</a>

Где ссылка - переменная области Angular.

Поделиться
  • 5
    Это не отвечает на вопрос OP, который касается использования ng-click для изменения местоположения.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню