href แทนที่ ng-click ใน Angular.js

118

เมื่อมีการกำหนดแอตทริบิวต์ href และ ng-click:

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

hrefแอตทริบิวต์จะเหนือกว่างะคลิก

ฉันกำลังมองหาวิธีเพิ่มลำดับความสำคัญของ ng-click

href จำเป็นสำหรับ Twitter Bootstrap ฉันไม่สามารถลบออกได้

— พอล
แหล่งที่มา

คุณช่วยอธิบายรายละเอียดเกี่ยวกับ "href is required for Twitter Bootstrap" ได้ไหม มันอยู่ส่วนไหน? CSS หรือ JavaScript?

— pkozlowski.opensource

"วิดเจ็ต" การนำทาง Bootstrap ของ Twitter คือการตั้งค่าให้ใช้ลิงก์หากคุณเพิ่มปุ่มลงไปแม้แต่ปุ่มที่มีลักษณะเหมือนลิงก์ก็จะทำให้รูปแบบการนำทางแตกได้ อาจไม่ใช่ HTML เชิงความหมาย แต่โซลูชันของ @ sketchfemme ทำในสิ่งที่ฉัน (และอาจเป็นพอล) ต้องการให้ทำ

— BenCr

ไม่ต้องสนใจทุกสิ่งที่ฉันพูด navbar ทำงานได้อย่างสมบูรณ์กับปุ่มหากคุณใช้ HTML และคลาสที่ถูกต้อง getbootstrap.com/components/#navbar

— BenCr

คุณควรยอมรับคำตอบของ Mithu ซึ่งก็คือการใช้ URL ว่างเปล่า

— Peter Morris

1

@Paul ผู้โพสต์คนเดิมถามวิธีรับ <a href> ไม่ให้นำทาง คำตอบที่ยอมรับบอกว่าให้เปลี่ยนเป็นปุ่ม แม้ว่าจะใช้งานได้ แต่ก็ไม่ใช่วิธีแก้ปัญหาโดยเฉพาะอย่างยิ่งถ้าคุณชอบตัวเองคุณต้องใช้ <a href> เพราะเป็นเมนู bootstrap หรืออะไรบางอย่าง วิธีแก้ปัญหาที่ถูกต้องสำหรับคำถามนี้คือใช้ URL ว่าง <a href="" ng-click="whatever()"> ออกจากระบบ </a> - ฉันทดสอบแล้วและสามารถยืนยันได้ว่าใช้ได้ โชคดีที่มีคนให้คำตอบที่ถูกต้องหรือฉันยังติดขัด

— Peter Morris

35

คุณควรใช้แท็กปุ่มถ้าคุณไม่ต้องการอูริ

— เจฟฟ์
แหล่งที่มา

ใช่ถ้าคุณสามารถอธิบายได้อย่างละเอียดว่า Twitter Bootstrap ต้องการอะไรฉันอาจจะช่วยได้มากกว่านี้

— Geoff

สิ่งนี้ทำงานอย่างไรกับเครื่องมือค้นหา ฉันใช้การกำหนดเส้นทาง AngularJS และจำเป็นต้องรักษาสถานะในบริการดังนั้นสำหรับลิงก์แอปพลิเคชันภายในทั้งหมดของฉันฉันใช้ $ location แต่การลบ href ทำให้เครื่องมือค้นหาไม่สามารถติดตามเว็บไซต์ได้

— Darrrrrren

2

ปุ่มไม่สามารถมีองค์ประกอบอื่นอยู่ข้างในได้ดังนั้นสำหรับการจัดแต่งทรงผมคุณคงไม่ต้องการทำเช่นนั้นหากคุณต้องการสิ่งที่อยู่ข้างใน

— นายอำเภอ

246

ตัวอย่างนี้จากไซต์เอกสารเชิงมุมทำได้hrefโดยไม่ต้องกำหนดให้กับสตริงว่าง:

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

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

— Homan
แหล่งที่มา

3

เมื่อฉันลองลิงก์ทั้งหมดนี้ดูเหมือนว่าจะมีผู้เยี่ยมชมซึ่งไม่ใช่พฤติกรรมที่ฉันตามมา อีกวิธีหนึ่ง ( href="#") ทำให้เกิดการโหลดหน้าซ้ำซึ่งก็ผิดเช่นกัน

— Rhys van der Waerden

4

ทำให้ IE9 ไม่แสดงเคอร์เซอร์มือ ใช้href=""แก้มัน

— Juampy NR

1

@juampy มือผ่านลิงก์สามารถจัดการได้ด้วย CSS คำตอบนี้เป็นวิธีการอย่างเป็นทางการของ AngularJS

— thenetimp

# จะได้รับการปฏิบัติเหมือนแฮชลิงค์

— นายอำเภอ

3

<a href="javscript:void(0)" ng-click="logout()">Sign out</a>จะให้บริการคุณเป็นอย่างดี

— Marios Fakiolas

88

คุณสามารถป้องกันพฤติกรรมเริ่มต้นของเหตุการณ์คลิกได้โดยตรงในเทมเพลตของคุณ

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

ตามเอกสารเชิงมุม ,

คำสั่งเช่น ngClick และ ngFocus แสดงวัตถุ $ เหตุการณ์ภายในขอบเขตของนิพจน์นั้น

— atroberts20
แหล่งที่มา

11

นี่เป็นทางออกที่ยอดเยี่ยม หากคุณมี href คุณสามารถคลิกขวาเพื่อเปิดในแท็บใหม่ แต่คลิกซ้ายที่เรียกว่า ng-click สิ่งที่ฉันกำลังมองหา

— Tom Grant

คำตอบที่ยอดเยี่ยมอีกครั้ง ทั้งคลิกซ้ายและขวาทำงาน

— Jay Jay Jay

ทำงานได้ดีในการอนุญาตให้ Bootstrap ควบคุมแบบหมุนโดยไม่ต้องทริกเกอร์การกำหนดเส้นทาง ขอบคุณ!

— Jason Maggard

ที่สมบูรณ์แบบ! ฉันสามารถดำเนินการต่อโดยใช้ลิงก์และรับดัชนีเพิ่มเติมใน Google และใช้ ng-click เพื่อโทรใน Ajax ขอบคุณ

— Guilherme IA

ทางออกที่ดีรวดเร็วและมีประโยชน์ ขอบคุณ!

— Josue Rocha

72

นี่คือวิธีแก้ปัญหาอื่น:

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

กล่าวคือเพียงแค่ลบ # ออกจากแอตทริบิวต์ href

— มูฮัมหมัดโตฟฟิกอิหม่าม
แหล่งที่มา

1

สำหรับคำถามที่ถามนี่น่าจะเป็นทางออก ทำงานบน Angular 1.1.5 เช่นกัน

— Sindre

18

ดูเหมือนว่า <a href="" ng-click=""> จะป้องกันไม่ให้คลิก ng-click ในเบราว์เซอร์ Android 2.3.x ในที่สุดฉันก็ใช้ <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

21

ในเชิงมุม<a>s มีคำสั่ง เช่นถ้าคุณมีที่ว่างเปล่าhrefหรือไม่href, event.preventDefaultเชิงมุมจะเรียก

จากแหล่งที่มา :

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

นี่คือplnkr ที่แสดงให้เห็นถึงhrefสถานการณ์ที่ขาดหายไป

— pdoherty926
แหล่งที่มา

13

สิ่งนี้ใช้ได้กับฉันใน IE 9 และ AngularJS v1.0.7:

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

ขอบคุณความคิดเห็นของ duckeggsสำหรับโซลูชันการทำงาน!

— ฮาร์มอน
แหล่งที่มา

ใช้งานได้ลิงก์จะไม่เปลี่ยน URL ของคุณและไม่ถูกทำเครื่องหมายว่าเยี่ยมชมแล้ว ตอบดีที่สุด!

— Jim109

10

มีคำตอบมากมายสำหรับคำถามนี้ที่นี่ แต่ดูเหมือนว่าจะมีความสับสนเล็กน้อยเกี่ยวกับสิ่งที่เกิดขึ้นที่นี่

ประการแรกหลักฐานของคุณ

"href แทนที่ ng-click ใน Angular.js"

มันผิด. สิ่งที่เกิดขึ้นจริงคือหลังจากการคลิกของคุณเหตุการณ์การคลิกจะถูกจัดการโดยเชิงมุมก่อน (กำหนดโดยng-clickคำสั่งในเชิงมุม 1.x และclickในเชิงมุม 2.x +) จากนั้นมันจะแพร่กระจายต่อไป (ซึ่งในที่สุดจะเรียกเบราว์เซอร์ให้ไปที่ url กำหนดด้วยhrefแอตทริบิวต์) (ดูสิ่งนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการขยายพันธุ์เหตุการณ์ใน JavaScript)

หากคุณต้องการหลีกเลี่ยงสิ่งนี้คุณควรยกเลิกการเผยแพร่เหตุการณ์โดยใช้วิธีการ ของอินเทอร์เฟซของเหตุการณ์preventDefault() :

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

(นี่คือฟังก์ชั่นจาวาสคริปต์ล้วนๆและไม่เกี่ยวข้องกับเชิงมุม)

ตอนนี้สิ่งนี้จะช่วยแก้ปัญหาของคุณได้แล้ว แต่นี่ไม่ใช่ทางออกที่ดีที่สุด เชิงมุมชอบธรรมส่งเสริมรูปแบบ MVC ด้วยโซลูชันนี้เทมเพลต html ของคุณจะผสมกับตรรกะของจาวาสคริปต์ คุณควรพยายามหลีกเลี่ยงสิ่งนี้ให้มากที่สุดและใส่ตรรกะของคุณลงในตัวควบคุมเชิงมุมของคุณ ดังนั้นวิธีที่ดีกว่าก็คือ

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

และในวิธีการ logout () ของคุณ:

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

hrefตอนนี้เหตุการณ์คลิกจะไม่สามารถเข้าถึงเบราว์เซอร์จึงจะไม่พยายามที่จะโหลดลิงค์ชี้ (อย่างไรก็ตามโปรดทราบว่าหากผู้ใช้คลิกขวาที่ลิงก์และเปิดลิงก์โดยตรงจะไม่มีเหตุการณ์การคลิกเลย แต่จะโหลด url ที่hrefแอตทริบิวต์ชี้โดยตรงแทน)

เกี่ยวกับความคิดเห็นเกี่ยวกับสีของลิงก์ที่เยี่ยมชมในเบราว์เซอร์ อีกครั้งสิ่งนี้ไม่เกี่ยวข้องกับเชิงมุมหากคุณhref="..."ชี้ไปที่ URL ที่เข้าชมโดยเบราว์เซอร์ของคุณโดยค่าเริ่มต้นสีของลิงก์จะแตกต่างกัน สิ่งนี้ควบคุมโดยCSS: ตัวเลือกที่เข้าชมคุณสามารถแก้ไข css ของคุณเพื่อลบล้างพฤติกรรมนี้:

a {
   color:pink;
}

PS1 :

บางคำตอบแนะนำให้ใช้:

<a href .../>

hrefเป็นคำสั่งเชิงมุม เมื่อแม่แบบของคุณถูกประมวลผลโดยเชิงมุมสิ่งนี้จะถูกแปลงเป็น

<a href="" .../>

สองวิธีนั้นเหมือนกันเป็นหลัก

— Caner
แหล่งที่มา

5

เพียงแค่เขียน ng-click ก่อน href .. มันได้ผลสำหรับฉัน

<!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..");
}

— อาจารย์ Malhotra
แหล่งที่มา

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
แหล่งที่มา