ngRoute 경로의 #!# 문제를 해결하는 방법에 대해 이야기해 볼까요?

이 글에서는 ngRoute 경로가 나타날 때 #!# 솔루션을 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 추천: "angularjs tutorial"

오픈 소스 프로젝트를 작업할 때 "angular-route": "^1.6.4"를 사용했는데

<a href="#about" class="ng-binding">About</a>

라벨을 클릭하면 주소창에 http://localhost:9000/#!#about이 뜹니다.

$location을 인쇄하세요.

우리가 설정한 $location이 예상대로 Pseudo URL의 경로 부분에 표시되지 않고 해시 부분으로 실행되는 것을 발견했습니다.

이유는 루트 버전>1.6.0일 때 기본 hashPrefix가 '!'로 수정되었기 때문입니다.

은 다음 코드와 동일합니다.

$locationProvider.hashPrefix('!');

아래에는 두 가지 솔루션이 제공됩니다.

1 hashPrefix를 1.6 이전 버전으로 복원합니다.

$locationProvider.hashPrefix('');

2. href

<a href="#!about" class="ng-binding">About</a>

의 형식을 변경하세요. ngRoute가 도입되면 태그가 ngRoute에 의해 다시 작성되는 것처럼 보입니다. / 문자열을 #에 직접 추가하는 대신 URL의 해시 부분에 추가하므로 과 같은 항목은 id="about"이 있는 태그로 이동할 수 없습니다. 저는 몇 가지 조사를 한 결과 명령을 작성한 다음 window.location.hash를 호출하여 이 문제를 해결할 수 있다는 것을 발견했습니다.

html

<a goto="#about" href="#about" class="ng-binding">About</a>

js

define(['app'], function (app) {
	app.directive('goto', function () {
		return function ($scope, $elem, $attrs) {
			$elem.click(function () {
				//console.log($attrs.goto.substring(1));
				window.location.hash = $attrs.goto.substring(1);
			});
		};
	});
});

참고: 위의 정의는 모듈을 정의하는 requireJS입니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 ngRoute 경로의 #!# 문제를 해결하는 방법에 대해 이야기해 볼까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!