Недействительные ссылки AngularJS

У меня есть индекс объектов, возвращаемых из поиска. Шаблон имеет ng-repeat, где URL-адрес элемента создается из данных в модели, но в окончательной разметке тег "a" не работает. Ng-href и href верны, строка URL изменяется при нажатии ссылки, но страница не загружается. Выполнение обновления браузера после щелчка позволяет получить страницу. Итак, что-то в Angular меняет строку URL, но не вызывает загрузку.

Невозможно сделать это воспроизведением в jsfiddle, потому что проблема заключается в загрузке json в шаблон после функции $resource.query(), которую я не могу сделать из jsfiddle. С помощью моделируемого запроса, загружающего статические данные, jsfiddle работает, хотя окончательная разметка выглядит одинаково.

Шаблон AngularJS выглядит следующим образом:

<div ng-controller="VideoSearchResultsCtrl" class="row-fluid">
  <div class="span12" >
    <div class="video_thumb" ng-repeat="video in videos">
      <p>
        <a ng-href="/guides/{{video._id}}" data-method="get">
          <img ng-src="{{video.poster.large_thumb.url}}">
        </a>
      </p>
    </div>
  </div>
</div>

Результаты выглядят отлично и производят следующую окончательную разметку:

<div ng-controller="VideoSearchResultsCtrl" class="row-fluid ng-scope">
  <div class="span12">
    <!-- ngRepeat: video in videos --><div class="video_thumb ng-scope" ng-repeat="video in videos">
      <p>
        <a ng-href="/guides/5226408ea0eef2d029673a80" data-method="get" href="/guides/5226408ea0eef2d029673a80">
          <img ng-src="/uploads/video/poster/5226408ea0eef2d029673a80/large_thumb_2101146_det.jpg" src="/uploads/video/poster/5226408ea0eef2d029673a80/large_thumb_2101146_det.jpg">
        </a>
      </p>
    </div><!-- end ngRepeat: video in videos -->
  </div>
</div>

Код контроллера:

GuideControllers.controller('VideoSearchResultsCtrl', ['$scope', '$location', 'VideoSearch',
    function($scope, $location, VideoSearch) {
        $scope.videos = VideoSearch.query({ namespace: "api", resource: "videos", action: 'search', q: $location.search().q });
    }
]);

Использование AngularJS 1.2-rc.3. Я также попытался использовать ng-click и обычный старый onclick, чтобы получить страницу, загруженную даже статическим URL-адресом, но клики никогда не запускают код. BTW static non angular ссылки на этой странице работают, поэтому работают меню и выходы.

Что я сделал неправильно здесь или это ошибка в AngularJS?

Ответ 1

Из списка рассылки я получил ответ:

Вы случайно настроили свой $locationProvider на html5Mode? Если да, это вызовет ваши проблемы. Вы могли бы заставить это чтобы всегда перейти к URL-адресу, добавив в свой тег target = "_ self". Дайте это выстрел.

Я настроил на использование HTML5, поэтому добавление тега target="_self" к тегу устраняет проблему. Все еще исследуя, почему это работает.

Ответ 2

Не уверен, что это было обновлено с момента ответа на этот пост, но вы можете настроить это при запуске приложения. Если для параметра rewriteLinks задано значение false, то вы снова активируете теги a, но при этом оставляете html5mode, что дает свои преимущества. Я добавил немного логики вокруг этих настроек, чтобы вернуть html5mode в браузеры, где window.history не поддерживается (IE8)

app.config(['$locationProvider', function ($locationProvider) {

    if (window.history && window.history.pushState) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: true,
            rewriteLinks: false
        });
    }
    else {
        $locationProvider.html5Mode(false);
    }
}]);

Угловые документы на $ locationProvider

Преимущества html5mode против режима hashbang

Ответ 3

Я знаю, что этот пост старый, но я недавно столкнулся с этой проблемой. На моей странице .html была база

//WRONG!
<base href="/page" />

и исправление:

//WORKS!
<base href="/page/" />

обратите внимание на обратную косую черту ('/') после "страницы".

Не уверен, что это относится к другим случаям, но попробуйте!

Ответ 4

AngularJS страдает от разреженной документации, я надеюсь, что их набирающий силу эффект улучшит ее. Я думаю, что AngularJS в первую очередь предназначен как SPA, и, возможно, идея дезактивации по умолчанию всех тегов позволяет легко включить angular в некоторые уже существующий html.

Это позволяет быстро рефакторировать поведение "маршрутизации" по умолчанию "традиционного" веб-сайта (ну, script страницы, связанные между собой) в систему маршрутизации angular, которая больше подходит для MVC-подхода, лучше подходит для веб-приложений.

Ответ 5

Найдите эту строку:

$locationProvider.html5Mode(true)

измените его на:

$locationProvider.html5Mode(true).hashPrefix('!')

и включите эту строку в начало index.html, если у вас ее нет.

<base href="/">

Ответ 6

Я вижу, что это старый, но это один из лучших результатов в Google. Так что, если вы используете Angular 7 и хотите связать только пару файлов, просто поместите в каталог "assets":

Теперь, когда вы хотите связать файл, вы можете просто использовать тег href, как показано ниже:

  <img src="assets/ang_1.png" alt="Angular">