href는 Angular.js에서 ng-click을 재정의합니다.

118

href 및 ng-click 속성이 모두 정의 된 경우 :

<a href="#" ng-click="logout()">Sign out</a>

href속성은 ng를 클릭보다 우선합니다.

ng-click의 우선 순위를 높이는 방법을 찾고 있습니다.

href Twitter Bootstrap에 필요하지만 제거 할 수 없습니다.

— 폴
소스

"트위터 부트 스트랩에 href가 필요합니다"에 대해 자세히 설명해 주시겠습니까? 그것의 어느 부분? CSS 또는 JavaScript?

— pkozlowski.opensource 2013

Twitter 부트 스트랩 내비게이션 "위젯"은 링크를 사용하도록 설정되어 있습니다. 버튼을 추가하면 링크처럼 보이도록 스타일이 지정되어 있어도 내비게이션 스타일이 깨집니다. 아마도 의미 론적 HTML은 아니지만 @sketchfemme의 솔루션은 내가 (그리고 아마도 Paul) 원하는 것을 수행합니다.

— BenCr 2013 년

내가 말한 모든 것을 무시하십시오. 올바른 HTML과 클래스를 사용하면 navbar가 버튼과 완벽하게 작동합니다. getbootstrap.com/components/#navbar

— BenCr 2013-09-10

당신은 빈 URL 사용하는 것입니다 Mithu에 의해 대답, 받아 들여야한다

— 피터 모리스

1

@Paul 원래 포스터는 <a href>를 탐색하지 않는 방법을 물었습니다. 허용되는 대답은 버튼으로 전환하라는 것입니다. 작동하지만 문제에 대한 해결책은 아닙니다. 특히 저와 같은 경우 부트 스트랩 메뉴 또는 무언가이기 때문에 <a href>를 사용해야합니다. 이 특정 질문에 대한 올바른 해결책은 빈 URL <a href="" ng-click="whatever()"> 로그 아웃 </a>을 사용하는 것입니다. 테스트했으며 작동하는지 확인할 수 있습니다. 고맙게도 다른 누군가가 정답을 제공하지 않으면 여전히 갇혀있을 것입니다.

— 피터 모리스

35

URI가 필요하지 않으면 버튼 태그를 사용해야합니다.

— Geoff
소스

예, Twitter Bootstrap에 필요한 방법에 대해 자세히 설명해 주시면 더 많은 도움을 드릴 수 있습니다.

— Geoff

검색 엔진에서 어떻게 작동합니까? AngularJS 라우팅을 사용하고 있으며 서비스에서 상태를 유지해야하므로 모든 내부 애플리케이션 링크에 대해 $ location을 사용하지만 href를 제거하면 검색 엔진이 사이트를 따라갈 수 없습니다.

— Darrrrrren 2014

2

버튼은 내부에 다른 요소를 가질 수 없으므로 스타일링을 위해 내부에 필요한 것이 있으면 그렇게하고 싶지 않을 것입니다.

— sheriffderek

246

각도 문서 사이트의이 예제 href는 빈 문자열에 할당 하지 않고 수행합니다.

[<a href ng-click="colors.splice($index, 1)">X</a>]

http://docs.angularjs.org/api/ng.directive:select

— 호만
소스

3

내가 이것을 시도하면 모든 링크가 방문한 것처럼 보이며 이는 내가 추구하는 행동이 아닙니다. 다른 방법 ( href="#")은 페이지를 다시로드하는 원인이됩니다.

— Rhys van der Waerden

4

이로 인해 IE9는 손 모양 커서를 표시하지 않습니다. 사용하면 href=""해결됩니다.

— Juampy NR 2015

1

@juampy, 링크 위의 핸드는 CSS로 처리 할 수 있습니다. 주어진 대답은 공식 AngularJS 방식입니다.

— thenetimp

#은 해시 링크처럼 취급됩니다.

— sheriffderek

3

<a href="javscript:void(0)" ng-click="logout()">Sign out</a>너무 잘 서비스를 제공합니다

— 마리오 Fakiolas에게

88

템플릿에서 직접 클릭 이벤트의 기본 동작을 방지 할 수 있습니다.

<a href="#" ng-click="$event.preventDefault();logout()" />

당 각 문서 ,

ngClick 및 ngFocus와 같은 지시문은 해당 표현식의 범위 내에서 $ event 객체를 노출합니다.

— atroberts20
소스

11

이것은 훌륭한 솔루션입니다. href가있는 경우 마우스 오른쪽 버튼을 클릭하여 새 탭에서 열 수 있지만 왼쪽 클릭하면 ng-click이 호출됩니다. 정확히 내가 찾던 것

— Tom Grant

다시 한 번 훌륭한 대답입니다. 왼쪽과 오른쪽 버튼을 클릭 작업

— 제이 제이 제이

라우팅을 트리거하지 않고 Bootstrap 캐 러셀 제어를 허용하는 데 적합했습니다. 감사!

— Jason Maggard

완전한! 링크를 계속하고 Google에서 더 많은 색인을 얻고 ng-click을 사용하여 Ajax에서 호출 할 수 있습니다. 감사.

— Guilherme IA

빠르고 유용한 훌륭한 솔루션입니다. 감사!

— Josue Rocha

72

다음은 또 다른 해결책입니다.

<a href="" ng-click="logout()">Sign out</a>

즉, href 속성에서 #을 제거하십시오.

— 무하마드 토 피크 이맘
소스

1

질문에 대한 해결책이 될 것입니다. 뿐만 아니라 각도 1.1.5에 근무

— Sindre

18

<a href="" ng-click="">이 Android 2.3.x 브라우저에서 ng-click을 방지하는 것 같습니다. 나는 마침내 <a href="javascript:void(0)" ng-click="">

— duckegg

1

Duckegg의 제안은 최고입니다

— 에 Jiří Vypědřík

26

힌트 하나만 더. 브라우저 접근성을 지원하기 위해 실제 URL이 필요한 경우 다음을 수행 할 수 있습니다.

주형:

<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>

지령:

$scope.linkClicked = function(link){
    // your code here
    $location.path(link);
};

이런 식으로 linkClicked ()의 코드가 링크로 이동하기 전에 실행될 수 있습니다.

— mPrinC
소스

이 솔루션은 작동하며 href의 링크에 대한 가능성을 포함하여 왼쪽 클릭 동작 만 변경하고 오른쪽 클릭은 그대로 유지됩니다 (컨텍스트 메뉴). 따라서 실제로 질문에 더 직접적으로 대답하는 TooMuchTenacious에 비해 더 일반적인 솔루션입니다.

— Exocom 2015-10-05

21

Angular에서 <a>s는 지시문 입니다. 따라서 비어 href있거나없는 href경우 Angular는 event.preventDefault.

로부터 소스 :

    element.on('click', function(event){
      // if we have no href url, then don't navigate anywhere.
      if (!element.attr(href)) {
        event.preventDefault();
      }
    });

다음 은 누락 된 시나리오를 보여주는 plnkrhref 입니다.

— pdoherty926
소스

13

이것은 IE 9 및 AngularJS v1.0.7에서 저에게 효과적이었습니다.

<a href="javascript:void(0)" ng-click="logout()">Logout</a>

작업 솔루션에 대한 duckeggs의 의견 에 감사드립니다 !

— 하몬
소스

작동, 링크는 URL을 변경하지 않으며 방문한 것으로 표시되지 않습니다. 베스트 답변!

— Jim109 2015 년

10

여기에이 질문에 대한 답이 너무 많지만 실제로 여기서 무슨 일이 벌어지고 있는지에 대해 약간의 혼란이있는 것 같습니다.

첫째, 전제

"href가 Angular.js의 ng-click보다 우선합니다."

잘못되었습니다. 실제로 발생하는 것은 클릭 후 클릭 이벤트가 먼저 angular ( ng-click각 1.x 및 clickangular 2.x +의 지시문에 의해 정의 됨)에 의해 처리 된 다음 계속 전파 (결국 브라우저가 href속성으로 정의 된 URL ). (See this ) 자바 스크립트에서 이벤트 전파에 대해 더 많은 것을 위해

이를 방지하려면 The Event 인터페이스의 preventDefault()메소드를 사용하여 이벤트 전파를 취소해야합니다 .

<a href="#" ng-click="$event.preventDefault();logout()" />

(이것은 순수한 자바 스크립트 기능이며 각도와 관련이 없습니다)

이제 이것은 이미 문제를 해결할 것이지만 최적의 솔루션은 아닙니다. Angular는 정당하게 MVC 패턴을 촉진합니다 . 이 솔루션을 사용하면 html 템플릿이 javascript 로직과 혼합됩니다. 가능한 한 이것을 피하고 로직을 각도 컨트롤러에 넣어야합니다. 그래서 더 나은 방법은

<a href="#" ng-click="logout($event)" />

그리고 logout () 메서드에서 :

logout($event) {
   $event.preventDefault();
   ...
}

이제 클릭 이벤트가 브라우저에 도달하지 않으므로에서 가리키는 링크를로드하지 않습니다 href. (그러나 사용자가 링크를 마우스 오른쪽 버튼으로 클릭하고 링크를 직접 열면 클릭 이벤트가 전혀 발생하지 않습니다. 대신에 해당 링크가 가리키는 URL을 직접로드합니다.href 속성이 합니다.)

브라우저에서 방문한 링크 색상에 대한 의견에 대해. 다시 말하지만 이것은 각도와 관련이 없습니다. href="..."기본적으로 브라우저에서 방문한 URL을 가리키는 경우 링크 색상이 다릅니다. 이것은 CSS : visited Selector에 의해 제어되며 CSS 를 수정하여이 동작을 재정의 할 수 있습니다.

a {
   color:pink;
}

PS1 :

일부 답변은 다음을 사용하는 것이 좋습니다.

<a href .../>

href각도 지시문입니다. 템플릿이 각도로 처리되면 다음으로 변환됩니다.

<a href="" .../>

이 두 가지 방법은 본질적으로 동일합니다.

— Caner
소스

5

href 전에 ng-click을 작성하십시오.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script>
    angular.module("module",[])
.controller("controller",function($scope){
  
  $scope.func =function(){
    console.log("d");
  }
  
})</script>
  </head>

  <body ng-app="module" ng-controller="controller">
    <h1>Hello ..</h1>
    <a ng-click="func()" href="someplace.html">Take me there</a>
  </body>

</html>

스 니펫 확장

— 안나
소스

2

href에서 "#"을 제거 할 필요가 없다고 생각합니다. Angularjs 1.2.10에서 다음 작업

<a href="#/" ng-click="logout()">Logout</a>

— Saurabh
소스

1

다음을 시도해 볼 수도 있습니다.

<div ng-init="myVar = 'www.thesoftdesign'">
        <h1>Tutorials</h1>
        <p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>

— Rizo
소스

0

저에게 적합한 예를 추가하고 원하는대로 변경할 수 있습니다.

컨트롤러 내부에 벨로우즈 코드를 추가합니다.

     $scope.showNumberFct = function(){
        alert("Work!!!!");
     }

내보기 페이지의 경우 다음 코드를 추가합니다.

<a  href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>

— BERGUIGA 모하메드 아민
소스

0

로그 아웃 기능 내부에서 리디렉션을 시도 했습니까? 예를 들어, 로그 아웃 기능은 다음과 같습니다.

$scope.logout = function()
{
  $scope.userSession = undefined;
  window.location = "http://www.yoursite.com/#"
}

그럼 당신은 그냥 가질 수 있습니다

<a ng-click="logout()">Sign out</a>

— Strizzwald
소스

0

이것을 확인하십시오

<a href="#" ng-click="logout(event)">Logout</a>

 $scope.logout = function(event)


 {
event.preventDefault();
alert("working..");
}

— 아제이 말로 트라
소스

0

//for dynamic elements - if you want it in ng-repeat do below code

angular.forEach($scope.data, function(value, key) {
     //add new value to object
    value.new_url  = "your url";
});

 <div ng-repeat="row in data"><a ng-href="{{ row.url_content }}"></a></div>

— 크리슈나
소스

0

이것은 나를 위해 작동합니다

<a href (click)="logout()">
   <i class="icon-power-off"></i>
   Logout
</a>

— Soukaina Benchekroun
소스