Вопрос по angularjs, javascript – angularjs - обновить при нажатии на ссылку с реальным URL

48

Я использую routeProvider для определения контроллеров и шаблонов для моих URL.

Когда я нажимаю на ссылку, которая имеет тот же URL, что и фактическое местоположение, ничего не происходит. Я хотел быreload() метод, который вызывается, если пользователь нажимает на такую ссылку, даже если местоположение не изменилось. Другими словами, если я установлю местоположение на то же значение, я бы хотел, чтобы оно велось так же, как если бы я установил его на другое значение.

Есть ли способ настроить routeProvider или locationProvider, чтобы сделать это автоматически? Или какой правильный подход сделать это? Это стандартное поведение в приложениях туда и обратно, но как это сделать в angularjs?

Я спросил об этом нагруппы Google также.

ОБНОВИТЬ:

Этот вопрос получает много просмотров, поэтому я постараюсь объяснить, как я решил свою проблему.

Я создал пользовательскую директиву для ссылок в своем приложении, как предложил Ренан Томаль Фернандес в комментариях.

angular.module('core.directives').directive('diHref', ['$location', '$route',
        function($location, $route) {
    return function(scope, element, attrs) {
        scope.$watch('diHref', function() {
            if(attrs.diHref) {
                element.attr('href', attrs.diHref);
                element.bind('click', function(event) {
                    scope.$apply(function(){
                        if($location.path() == attrs.diHref) $route.reload();
                    });
                });
            }
        });
    }
}]);

Директива затем используется для всех ссылок в моем приложении, я хочу иметь эту функцию.

<a di-href="/home/">Home</a>

Эта директива делает то, что она устанавливаетhref атрибут для вас на основеdi-href атрибут angular может обрабатывать его как всегда, и вы можете видеть URL при наведении курсора на ссылку. Кроме того, когда пользователь нажимает на него и путь ссылки совпадает с текущим, он перезагружает маршрут.

Ответ @ public0821 намного лучше, чем выбранный ответ Nayish
Пожалуйста, будьте осторожны с приведенным выше примером кода, поскольку он вызывает утечки памяти.$watch() содержит эту инструкциюelement.bind('click', function(event) { ... }); Это означает, что он будет создавать обработчик событий щелчка для каждого запуска наблюдателя, не выпуская предыдущий обработчик щелчка. Kayhadrin

Ваш Ответ

10   ответов
6

От@ Ренан Томаль Фернандес ответ, Ниже приведен пример

HTML

<a href="#/something" my-refresh></a>

JS

angular.module("myModule",[]).
directive('myRefresh',function($location,$route){
    return function(scope, element, attrs) {
        element.bind('click',function(){
            if(element[0] && element[0].href && element[0].href === $location.absUrl()){
                $route.reload();
            }
        });
    }   
});
обнаружил, что это не будет работать, если вы используете ui-router вместо модуля маршрута по умолчанию
Не совсем уверен, но назвал эту директиву как "href" заставит все ссылки работать правильно без каких-либо изменений в разметке.
если вы используете ui-router, вы можете заменить $ route.reload на$state.transitionTo($state.current, $stateParams, { reload: true, inherit: false, notify: true });
@Lisio - только что проверил ваше предложение, и оно отлично работает. Очень хорошее решение
-3

Просто попытался добавить это

$(window).on('popstate', function(event) {
//refresh server data
});

и работает нормально

76

Add a / (slash) to the defined url in the route configuration

Я столкнулся с подобной проблемой сегодня, у меня есть ссылка на моей веб-странице, и когда я щелкаю ее, я хочу каждый раз перезагружать ng-view, чтобы я мог обновить данные с сервера. Но если местоположение URL-адреса не изменяется, угловое не перезагружает ng-представление.

Наконец-то я нашел решение этой проблемы. На моей веб-странице я установил ссылку href на:

  • <a href="#/test">test</a>

Но в конфиге маршрута я установил:

  • $routeProvider.when('/test/', { controller: MyController, templateUrl:'/static/test.html' });

Отличается последний слеш в URL. Когда я нажимаюhref="#/test" впервые, угловой перенаправить URL-адрес на#/test/и загрузите ng-view. когда я нажимаю на него во второй раз, потому что текущий URL#/test/, он не равен URL в ссылке (href="#/test") Я нажал, так что Angular запускает метод изменения местоположения и перезагружает ng-представление, кроме того, Angular перенаправляет URL-адрес на#/test/ снова. в следующий раз, когда я нажму на ссылку, angular снова сделает то же самое. Что именно то, что я хотел.

Надеюсь, это было полезно для вас.

Обратите внимание, что это также будет работать в обратном порядке. Если вы не хотите использовать конечные слэши на своих маршрутах, вы можете вместо этого обновить ссылки href, чтобы иметь конечный слеш.
Это сработало! Для корня я использовал href = & apos; # & apos; и $ routeProvider.when ("/", ...)
Интересно. Оно работает. Спасибо.
Вы сделали мой день! Элегантно и просто.
Как это будет работать с$stateProvider?
1

Я думаю, что это более простой подход.

.directive ('a', function ($route, $location) {
    var d = {};
    d.restrict = 'E';
    d.link = function (scope, elem, attrs) {

        // has target
        if ('target' in attrs) return;

        // doesn't have href
        if (!('href' in attrs)) return;

        // href is not the current path
        var href = elem [0].href;
        elem.bind ('click', function () {
            if (href !== $location.absUrl ()) return;
            $route.reload ();
        });
    };
    return d;
});

Предполагая, что вы хотите сделать все основные<a> ссылки (безtarget атрибут) перезагрузить при нажатии и вы используете относительные ссылки вhref атрибут (например,/home вместоhttp://example.com/home) Вам не нужно добавлять какую-либо специальную разметку в HTML (это удобно при обновлении сайта с уже написанным HTML).

59

Вы можете добавить_target='_self' по ссылке, чтобы заставить страницу перезагрузить.

например

<a href="/Customer/Edit/{{customer.id}}" target="_self">{{customer.Name}}</a>

Протестировано с версиями 1.0.5 и 1.2.15 на IE и Firefox.

Здесь больше информации отСайт AngularJS :

Html link rewriting

Когда вы используете режим API истории HTML5, вам понадобятся разные ссылки в разных браузерах, но все, что вам нужно сделать, это указать обычные ссылки URL, такие как:

<a href="/some?foo=bar">link</a>

Когда пользователь нажимает на эту ссылку,

  • In a legacy browser, the URL changes to /index.html#!/some?foo=bar
  • In a modern browser, the URL changes to /some?foo=bar

В подобных случаях ссылки не перезаписываются; вместо этого браузер выполнит полную перезагрузку страницы до исходной ссылки.

  • Links that contain target element Example: <a href="/ext/link?a=b" target="_self">link</a>

  • Absolute links that go to a different domain Example: <a href="http://angularjs.org/">link</a>

  • Links starting with '/' that lead to a different base path when base is defined Example: <a href="/not-my-base/link">link</a>

Ну, это перезагрузит всю страницу, лучше было бы просто позвонитьreload() метод, например в директиве. davekr
На самом деле это довольно хороший трюк, когда вы хотите, чтобы страница перезагружалась по некоторым ссылкам ...
целевых = & Quot; _self & Quot; было идеальным решением для меня. У меня была целевая страница в моем приложении, если не были переданы определенные переменные GET. Эта целевая страница позволила вам установить их, а затем загрузить текущую страницу с этими переменными GET. У меня была определенная логика сервера, основанная на этих переменных GET, и я не хотел дублировать логику в Angular.
Но я не хочу, чтобы перезагрузилась вся страница, только механизм угловой маршрутизации. Если вы перезагрузите целую страницу, это будет несовместимо с остальной частью приложения. Это своего рода «лучше» Я имел в виду. davekr
0

В моем случае, если URL-адрес один и тот же, ничего не работает, включая $ route.reload (), $ location.path (), $ state.transitonTo () и т. Д.

Таким образом, мой подход был следующим:

if( oldLocation === newLocation ) {
   // nothing worked ------------
   // window.location.reload(); it refresh the whole page
   // $route.reload();
   // $state.go($state.$current, null, { reload: true });
   // $state.transitionTo($state.current, $stateParams, {reload:true, inherit: false, notify: false } );
   // except this one
   $location.path('/dummy'); 
   $location.path($location.path());
   $scope.$apply(); 
}

Вы должны сделать "/ dummy" модуль где-то, модуль ничего не делает, он только меняет URL, так что следующий $ location.path () может быть применяется. Не пропустите $ scope. $ Apply ()

0

Я попробовал решение Виттайи выше с использованием директивного подхода. Каким-то образом директива продолжает выдавать ошибку. Я в конечном итоге с этим решением

HTML

<a href="javascript:void(0)" data-ng-click="stateGo('devices')">Devices</a>

контроллер

    $scope.stateGo = function (stateName) {
        if ($state.$current.name === stateName) {
            $state.reload();
        } else {
            $state.go(stateName);
        }
    }
8

Для людей, которые используютAngularUI Router, Вы можете использовать что-то вроде этого:

<a data-ui-sref="some.state" data-ui-sref-opts="{reload: true}">State</a>

Обратите внимание на вариант перезагрузки.

Нашел ответ здесь:https://stackoverflow.com/a/29384813/426840

Ни одно из «решений» выше работал для меня, но этот сделал!
21

вы должны использовать$ Route.reload () заставить перезагрузить.

Я не знаю, есть ли "автоматический" способ сделать это, но вы можете использовать нг-клик по этим ссылкам

может быть, вы можете создать директиву для «a»; тег, который проверяет, является ли URL-адрес dest такой же, как в ссылке, и перезагружает $ route ... я думаю, это очень общий и хороший способ
Это не очень общее решение. Если бы я хотел, чтобы такое поведение было во всем приложении, мне нужно было бы добавить ng-click к каждой ссылке. davekr
0

Я столкнулся с этой проблемой несколько минут назад, за исключением того, что это была домашняя страница "/". Я хотел простое решение с меньшим количеством кода. Я просто воспользовался методом .otherwise в $ routProvider

Так что в HTML ссылка выглядит так:

<a href="#/home">Home</a>

поскольку нет "/ home" страница, указанная в routProvider, будет перенаправлена на «/ apos; /»; через «иначе» метод. страница с этой настройкой:

.otherwise({
redirectTo: '/'
});

Надеюсь, это поможет кому-то

Похожие вопросы