AngularJS 태그 링크가 작동하지 않음

AngularJS 태그 링크가 작동하지 않음

검색에서 반환된 개체의 인덱스가 있습니다.템플릿에는 ng-repeat이 있습니다.이 경우 모델의 데이터로 항목의 URL이 구성되지만 최종 마크업에서는 "a" 태그가 작동하지 않습니다.ng-href 및 href가 올바릅니다.링크를 클릭해도 페이지가 로드되지 않으면 URL 바가 변경됩니다.클릭 후 브라우저를 새로 고치면 페이지가 나타납니다.그러면 Angular의 무언가가 URL 바를 변경하지만 로드를 트리거하지 않습니다--

$리소스 후에 json을 템플릿에 로드하는 데 문제가 있는 것 같기 때문에 jsfiddle로 재현할 수 없습니다.jsfiddle에서는 실행할 수 없는 query() 함수입니다.정적 데이터를 로드하는 시뮬레이션 쿼리를 사용하면 최종 마크업이 동일해 보여도 jsfiddle이 작동합니다.

앵귤러JS 템플릿은 다음과 같습니다.

<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과 일반 이전 클릭을 사용하여 정적 URL을 사용하더라도 페이지를 불러오려고 시도했지만 클릭으로 코드가 트리거되지 않습니다.이 페이지의 BTW 정적 비각선 링크는 기능하므로 메뉴 모음과 로그아웃이 작동합니다.

제가 여기서 뭘 잘못했나요? 아니면 이게 AngularJS의 버그인가요?

메일링 리스트에서 답변을 받았습니다.

혹시 $location Provider를 html5Mode로 설정하셨나요?네, 이것이 문제의 원인이 됩니다.태그에 target="_self"를 추가하여 항상 URL로 이동할 수 있습니다.한번 해봐.

HTML5를 사용하도록 설정했기 때문에,target="_self"태그로 문제를 해결했습니다.이게 왜 먹히는지 아직 조사중이야

이 투고가 응답된 이후 이 게시물이 업데이트되었는지 여부는 알 수 없지만 응용 프로그램 시작 시 이 정보를 구성할 수 있습니다.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의 각도 문서

html5 모드와 해시방 모드의 이점

이 게시물이 오래된 것은 알지만, 최근에도 이 문제에 부딪혔습니다.내 .html 페이지에는 베이스가 있습니다.

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

해결 방법:

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

'page' 뒤에 앞부분('/')이 표시됩니다.

이것이 다른 경우에 해당될지는 모르겠지만, 한번 시도해 보세요!

AngularJS는 문서가 희박하여 어려움을 겪고 있습니다.그것의 추진력이 향상되었으면 합니다.각진 것 같아요.JS는 주로 SPA를 목적으로 하며, 모든 태그를 기본적으로 비활성화하면 이미 존재하는 HTML에 angular를 쉽게 통합할 수 있습니다.

이것에 의해, 「기존」웹 사이트(서로 링크 된 스크립트 페이지)의 디폴트의 「루팅」동작을, MVC 어프로치에 가까운 각도 라우팅 시스템에 재빠르게 리팩터링 할 수 있게 됩니다.

다음 행을 찾습니다.

$locationProvider.html5Mode(true)

변경 대상:

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

이 행이 없는 경우 index.laught의 선두에 포함시킵니다.

<base href="/">

오래된 내용이지만 구글에서 가장 높은 결과물 중 하나입니다.따라서 Angular 7을 사용하여 몇 개의 파일만 링크하는 경우 를 "assets" 디렉토리에 넣습니다.

이제 파일을 링크하려면 다음과 같이 href 태그를 사용합니다.

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

주의: 기본적으로는 자산 폴더에만 연결할 수 있으므로 파일을 해당 폴더에 저장해야 합니다.

언급URL : https://stackoverflow.com/questions/19773682/angularjs-a-tag-links-not-working