Предположим, вы используете маршруты:
// 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 вы хотите перейти на страницу about при нажатии кнопки. Один из способов был бы
<a href="#/about">
... но, похоже, здесь тоже был бы полезен ng-click.
- Это предположение верно? Что нг-клик будет использоваться вместо якоря?
- Если так, как это будет работать? IE:
<div ng-click="/about">
angularjs
routes
angularjs-routing
angularjs-ng-click
angularjs-ng-route
Роберт Кристиан
источник
источник
Ответы:
Маршруты отслеживают
$location
службу и реагируют на изменения в URL (обычно через хеш). Чтобы «активировать» маршрут, вы просто меняете URL. Самый простой способ сделать это с помощью тегов привязки.Ничего более сложного не нужно. Однако, если вы должны сделать это из кода, правильным способом является использование
$location
сервиса:Который, например, кнопка может вызвать:
источник
path
иhash
служат двум различным целям, но в зависимости от обстоятельств могут иметь одинаковый эффект. В большинстве случаев для строгой маршрутизации (особенно сhtml5mode
включенной)path
будет канонический выбор. Я обновил ответ, чтобы отразить это./
. Если вы обслуживаете приложение из/app/index.html
, то это не будет работать, потому что абсолютный URL-адрес/app/next.html
. Очевидно также, что сервер должен быть настроен на возврат вашегоindex.html
файла при нажатии на/next.html
. Не стесняйтесь размещать Plunker / Fiddle, если вы хотите, чтобы я посмотрел.go
метод для каждого контроллера? (Или создать корневой контроллер с помощьюgo
метода?)<button click-go="/home">Click</button>
. Функция связи будет только такой:element.on("click", function () { $location.path(attrs.clickGo); });
Вот отличный совет, который никто не упомянул. В контроллере, в котором находится функция, необходимо включить поставщика местоположения:
источник
Использование пользовательского атрибута (реализованного с помощью директивы) является, пожалуй, самым чистым способом. Вот моя версия, основанная на предложениях @Josh и @ sean.
У него есть некоторые полезные функции, но я новичок в Angular, так что, вероятно, есть возможности для улучшения.
источник
clickLink
атрибут изменится, директива добавит новый обработчик кликов, но оставит старый на месте. Результат может быть немного хаотичным. Первоначально я написал это для использования в ситуации, когдаclickLink
атрибут никогда не изменится, поэтому я никогда не связывал этот свободный конец. Я думаю, что исправление этой ошибки на самом деле привело бы к более простому коду - я мог бы попытаться сделать это, когда у меня будет время (ха!)attrs.$observe
было там. Спасибо за ваши предложения.Помните, что если вы используете ng-click для маршрутизации, вы не сможете щелкнуть правой кнопкой мыши по элементу и выбрать «открыть в новой вкладке» или нажать Ctrl, щелкнув ссылку. Я пытаюсь использовать ng-href, когда дело доходит до навигации. ng-click лучше использовать на кнопках для операций или визуальных эффектов, таких как свертывание. Но про я бы не советовал. Если вы измените маршрут, вам может потребоваться изменить многие из размещенных в приложении. Есть метод, возвращающий ссылку. пример: о. Этот метод вы помещаете в утилиту
источник
Я использовал
ng-click
директиву для вызова функции при запросе маршрута templateUrl, чтобы решить, какая<div>
должна бытьshow
илиhide
внутри страницы маршрута templateUrl, или для других сценариев.AngularJS 1.6.9
Давайте посмотрим на пример, когда на странице маршрутизации мне нужно добавить
<div>
или изменить<div>
, которыми я управляю, используя модели родительского контроллера$scope.addProduct
и$scope.editProduct
логическое значение.RoutingTesting.html
TestingPage.html
обе страницы -
RoutingTesting.html
(родитель),TestingPage.html
(страница маршрутизации) находятся в одном каталоге,Надеюсь, это кому-нибудь поможет.
источник
Другое решение, но без использования ng-click, которое работает даже для других тегов, кроме
<a>
:Таким образом, вы также можете передать параметры в ваш маршрут: https://stackoverflow.com/a/40045556/838494
(Это мой первый день с угловой. Нежная обратная связь приветствуется)
источник
Ты можешь использовать:
Если вам нужна динамическая переменная внутри href, вы можете сделать это следующим образом:
Где ссылка - угловая переменная области видимости.
источник
ng-click
для изменения местоположения.просто сделайте это в вашей html-записи следующим образом:
И в вашем контроллере добавьте $ state следующим образом:
источник