Angularjs - обновление при нажатии на ссылку с фактическим URL-адресом

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

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

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

Я также спросил его группы google.

UPDATE:

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

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

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-адрес, когда вы наводите курсор на ссылку. Кроме того, когда пользователь нажимает на него, и путь ссылки совпадает с текущим путем, он перезагружает маршрут.

Ответы

Ответ 1

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

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

Ответ 2

Добавить/(косой чертой) в определенный URL-адрес в конфигурации маршрута

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

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

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

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

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

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

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

Ответ 3

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

например.

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

Я тестировал это на версиях 1.0.5 и 1.2.15 на IE и Firefox. Кажется хорошо работать.

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

Переписывание HTML-ссылок

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

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

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

  • В устаревшем браузере URL-адрес изменяется на /index.html#!/some?foo=bar
  • В современном браузере URL-адрес изменяется на /some?foo=bar

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

  • Ссылки, содержащие целевой элемент Пример: <a href="/ext/link?a=b" target="_self">link</a>

  • Абсолютные ссылки, которые переходят в другой домен Пример: <a href="http://angularjs.org/">link</a>

  • Ссылки, начинающиеся с '/', которые приводят к другому базовому пути, когда база определена Пример: <a href="/not-my-base/link">link</a>

Ответ 4

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

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

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

Нашел ответ здесь: fooobar.com/questions/25264/...

Ответ 5

Из @Renan Tomal Fernandes ответ. ниже приведен пример

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

Ответ 6

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

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

Ответ 7

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

Итак, мой подход заключался в использовании Dummy Page, как показано ниже,

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()

Ответ 8

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

Итак, в ссылке html выглядит:

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

так как нет страницы "/home", указанной в маршрутной панели, она будет перенаправляться на "/" с помощью метода "иначе". страницы с этой настройкой:

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

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

Ответ 9

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

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

Ответ 10

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

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

и он отлично работает