angular.js 링크 동작 - 특정 URL에 대해 딥 링크를 비활성화합니다.
HTML5 모드를 유효하게 한 Angular.js 앱을 사용하고 있습니다.
$location.Html5mode(true).hashbang("!");
제가 원하는 것은 몇 개의 URL을 얻는 것입니다.<a>HTML5 이력 API를 사용하여 주소 표시줄의 URL을 변경하고 Angular 컨트롤러를 사용하여 처리하는 대신 일반 브라우징 동작을 수행하는 태그입니다.
다음 링크가 있습니다.
<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')정말이에요.
Fran6co 메서드 대신 $locationProvider에서 'rewriteLinks' 옵션을 비활성화합니다.
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
이것은 $rootElement.off('click')를 호출하는 것과 정확히 동일한 작업을 수행하지만 앱의 루트 요소에서 클릭 이벤트를 처리하는 다른 Javascript에는 간섭하지 않습니다.
딥링크를 모두 끄기 위한 코드입니다.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");
}
};
});
각도에서 몇 번 같은 문제에 부딪힌 적이 있는데, 두 가지 기능적 해결책을 생각해냈지만 둘 다 '각도'가 아니라 '각도'처럼 느껴집니다.
해킹 No.1:
바인드 awindow.location링크에 새로 고침click이벤트입니다.
<a
href=/external/link.html
onclick="window.location = 'http://example.com/external/link.html';"
>
이 접근법의 단점과 문제점들은 꽤 명백하다.
해킹 #2
각도 설정$route를 실행하다$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또는 쿼리 문자열을 사용하여 1개의 컨트롤러가 모든 "접속" 링크를 처리하도록 합니다.
말씀드렸듯이, 어느 솔루션도 그다지 만족스럽지 않습니다만, 단기간에 이 작업을 실시해야 한다면 도움이 될 것입니다.
참고로 앵글 서포트를 꼭 보고 싶습니다.rel=externaljQueryMobile이 이 기능을 사용하여 Ajax 페이지 로드를 비활성화하는 것과 매우 유사합니다.
Dragonfly의 답변에 덧붙이자면, target="_self" 속성의 수를 제한하는 가장 좋은 방법은 ng-app 속성을 본문 태그에 넣지 않는 것입니다.이렇게 함으로써 각진 곳에 바디 태그 내의 모든 것이 각진 앱의 일부라는 것을 알 수 있습니다.
각도의 영향을 받지 않는 정적 래퍼 내에서 작업할 경우 ng-app 속성을 각진 앱이 동작하는 위치만 둘러싸는 div(또는 다른 요소)에 넣습니다.이렇게 하면 ng-app 요소의 하위 항목이 될 링크에만 target='_self' 속성을 넣을 수 있습니다.
<body>
... top markup ...
<div ng-app="myApp">
<div ng-view></div>
</div>
... bottom markup ...
</body>
경로에서 다음을 시도합니다.
$routeProvider.otherwise({})
언급URL : https://stackoverflow.com/questions/11580004/angular-js-link-behaviour-disable-deep-linking-for-specific-urls
'code' 카테고리의 다른 글
| RestSharp JSON 파라미터 게시 (0) | 2023.02.08 |
|---|---|
| AngularJS 태그 속성 (0) | 2023.02.08 |
| 커스텀 투고 타입에서 모든 카테고리를 나열하는 방법 (0) | 2023.02.08 |
| Javascript에서 JSON 문자열을 JSON 개체 배열로 변환 (0) | 2023.02.08 |
| ID별 배열에서 개체 가져오기 각도 (0) | 2023.02.08 |