angular.js 링크 동작-특정 URL에 대한 딥 링크 비활성화
HTML5 모드가 활성화 된 작동하는 Angular.js 앱이 있습니다.
$location.Html5mode(true).hashbang("!");
내가 달성하고 싶은 것은 <a>HTML5 히스토리 API를 사용하여 주소 표시 줄의 URL을 변경하고 Angular 컨트롤러를 사용하여 처리하는 대신 정상적인 브라우징 동작을 수행하는 URL 또는 태그 를 가져 오는 것입니다.
이 링크가 있습니다.
<a href='/auth/facebook'>Sign in with Facebook</a>
<a href='/auth/twitter'>Sign in with Twitter</a>
<a href='/auth/...'>Sign in with ...</a>
그리고 브라우저가 사용자를 리디렉션하여 사용자가 /auth/...인증 서비스로 리디렉션되도록하고 싶습니다 .
내가 할 수있는 방법이 있습니까?
target="_self"Angular 1.0.1에서 작업 추가 :
<a target="_self" href='/auth/facebook'>Sign in with Facebook</a>
이 기능은 문서화되어 있습니다 ( https://docs.angularjs.org/guide/$location- '_self'검색).
궁금하다면 각도 소스 (줄 5365 @ v1.0.1)를보십시오. 클릭 하이재킹 !elm.attr('target')은 true 인 경우에만 발생 합니다.
Fran6co의 방법에 대한 대안은 $ locationProvider에서 'rewriteLinks'옵션을 비활성화하는 것입니다.
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
이렇게하면 $ rootElement.off ( 'click') 호출과 똑같은 작업을 수행 할 수 있지만 앱의 루트 요소에서 클릭 이벤트를 처리하는 다른 자바 스크립트를 방해하지 않습니다.
딥 링크를 모두 끄는 코드입니다. rootElement에서 클릭 이벤트 핸들러를 비활성화합니다.
angular.module('myApp', [])
.run(['$location', '$rootElement', function ($location, $rootElement) {
$rootElement.off('click');
}]);
Nik의 대답을 해결하기 위해 링크가 많고 각 링크에 대상을 추가하지 않으려는 경우 지시문을 사용할 수 있습니다.
Module.directive('a', function () {
return {
restrict: 'E',
link: function(scope, element, attrs) {
element.attr("target", "_self");
}
};
});
나는 앵귤러와 함께 같은 문제를 몇 번 만났고, 두 가지 기능적 솔루션을 생각해 냈지만 둘 다 해킹처럼 느껴지고별로 "앵글"이 아닌 것 같다.
해킹 # 1 :
window.location새로 고침을 링크의 click이벤트에 바인딩합니다 .
<a
href=/external/link.html
onclick="window.location = 'http://example.com/external/link.html';"
>
이 접근법의 단점과 문제점은 상당히 분명합니다.
해킹 # 2
변경 $route을 수행하는 Angular를 설정합니다 $window.location.
// Route
.when('/external', {
templateUrl: 'path/to/dummy/template',
controller: 'external'
})
// Controller
.controller('external', ['$window', function ($window) {
$window.location = 'http://www.google.com';
}])
$routeParams하나의 컨트롤러가 모든 "외부"링크를 처리하도록 문자열을 쿼리하거나 사용하여이를 확장 할 수 있다고 생각합니다 .
내가 말했듯이 이러한 솔루션 중 어느 것도 그다지 만족스럽지 않지만 단기간에 작동해야하는 경우 도움이 될 수 있습니다.
참고로, rel=externaljQueryMobile이 ajax 페이지 로딩을 비활성화하는 데 사용하는 것과 마찬가지로 이러한 유형의 기능에 대한 Angular 지원을보고 싶습니다.
To add to Dragonfly's answer, a best practice I have found to limit the number of target="_self" attributes is to never put the ng-app attribute on the body tag. By doing that you are telling angular that everything within the body tags are a part of the angular app.
If you are working within a static wrapper that should not be affected by angular, put your ng-app attribute on a div (or other element) that surrounds only the location your angular app is going to be working in. This way you will only have to put the target='_self' attribute on links that will be children of the ng-app element.
<body>
... top markup ...
<div ng-app="myApp">
<div ng-view></div>
</div>
... bottom markup ...
</body>
In your routes try:
$routeProvider.otherwise({})
ReferenceURL : https://stackoverflow.com/questions/11580004/angular-js-link-behaviour-disable-deep-linking-for-specific-urls
'programing' 카테고리의 다른 글
| 사용자 정의 유형이 이미 PostgreSQL에 있는지 확인 (0) | 2021.01.16 |
|---|---|
| yum을 깨지 않고 파이썬 업그레이드 (0) | 2021.01.16 |
| Twitter 부트 스트랩 모달 입력 필드 포커스 (0) | 2021.01.16 |
| Eclipse 오류 : R을 변수로 해석 할 수 없습니다. (0) | 2021.01.16 |
| 프로젝트 폴더가없는 자식 복제 (0) | 2021.01.16 |