href Angular.js এ এনজি-ক্লিককে ওভাররাইড করে

Question

যখন উভয়, href এবং এনজি-ক্লিক বৈশিষ্ট্য সংজ্ঞায়িত করা হয়:

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

hrefঅ্যাট্রিবিউট ng ক্লিকে অগ্রগণ্যতা নেয়।

আমি এনজি-ক্লিকের অগ্রাধিকার বাড়ানোর উপায় খুঁজছি।

href টুইটার বুটস্ট্র্যাপের জন্য প্রয়োজনীয়, আমি এটি সরাতে পারি না।

Comments

আপনি কি "টুইটার বুটস্ট্র্যাপের জন্য href প্রয়োজন?" এর কোন অংশ? সিএসএস না জাভাস্ক্রিপ্ট?

— pkozlowski.opensource

টুইটার বুটস্ট্র্যাপ ন্যাভ "উইজেট" লিঙ্কগুলি ব্যবহারের জন্য সেটআপ করা হয়েছে, আপনি যদি এটিতে একটি বোতাম যুক্ত করেন, এমনকি এমন কোনও লিঙ্কের মতো দেখতে স্টাইলযুক্ত যা এটি নেভিগেশনের স্টাইলিংকে ভেঙে দেয়। এটি সম্ভবত সিমান্টিক এইচটিএমএল নয় তবে @ স্কেচফেম্মির সমাধানটি আমি (এবং সম্ভবত পল) এটি করতে চাইলে তা করে।

— বেনক্রি

আমি যা বলেছি সব কিছু উপেক্ষা করুন, আপনি যদি সঠিক এইচটিএমএল এবং ক্লাস ব্যবহার করেন তবে নভবার বোতামগুলির সাথে পুরোপুরি কাজ করে। getbootstrap.com/components/#navbar

— BenCr

মিঠুর উত্তরটি আপনার গ্রহণ করা উচিত, যা খালি ইউআরএল ব্যবহার করা হয়

— পিটার মরিস

@ পল আসল পোস্টারটি জিজ্ঞাসা করেছিল যে কীভাবে নেভিগেট না করতে <a href> পাবেন get গৃহীত উত্তরটি একটি বোতামে স্যুইচ করতে বলে। যদিও এটি কাজ করে এটি সমস্যার সমাধান নয়, বিশেষত যদি নিজের মতো করে আপনি <a href> ব্যবহার করতে বাধ্য হন কারণ এটি একটি বুটস্ট্র্যাপ মেনু বা অন্য কিছু। এই নির্দিষ্ট প্রশ্নের সঠিক সমাধানটি হ'ল একটি খালি ইউআরএল <a href="" ng-cl==www(()"> লগ আউট </a> ব্যবহার করা - আমি এটি পরীক্ষা করে দেখেছি এবং নিশ্চিত হয়ে যায় যে এটি কাজ করে। ধন্যবাদ অন্য কেউ সঠিক উত্তর সরবরাহ করেছে বা আমি এখনও আটকে আছি।

— পিটার মরিস 23

Answer 1

আপনার যদি ইউরির দরকার না হয় তবে আপনার সম্ভবত একটি বোতাম ট্যাগ ব্যবহার করা উচিত।

Comments

হ্যাঁ, আপনি কীভাবে টুইটার বুটস্ট্র্যাপের এটির প্রয়োজন তা যদি বিশদভাবে জানাতে পারেন তবে আমি আরও সাহায্য করতে পারি।

— জেফ

কীভাবে অনুসন্ধান ইঞ্জিনগুলির সাথে এটি কাজ করে? আমি AngularJS রাউটিং ব্যবহার করছি এবং একটি পরিষেবাতে রাষ্ট্রের বজায় রাখা প্রয়োজন যাতে আমার সমস্ত অভ্যন্তরীণ অ্যাপ্লিকেশন লিঙ্কের জন্য আমি $ অবস্থান ব্যবহার করি তবে href অপসারণের ফলে অনুসন্ধান ইঞ্জিনগুলির পক্ষে সাইটটি অনুসরণ করা অসম্ভব হয়ে পড়ে।

— দারর্রেন

বোতামগুলির মধ্যে অন্য উপাদান থাকতে পারে না, সুতরাং স্টাইলিংয়ের জন্য, আপনি এটি করতে চাইবেন না - যদি এটির ভিতরে জিনিসগুলির প্রয়োজন হয়।

— শেরিফডেরেক

Answer 2

কৌণিক ডকুমেন্টেশন সাইট থেকে এই উদাহরণটি hrefখালি স্ট্রিংকে এমনকি নির্ধারিত না করেই করে :

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

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

Comments

আমি যখন এই চেষ্টা করি তখন সমস্ত লিঙ্ক পরিদর্শন করা হবে বলে মনে হয়, যা আমার পরে আচরণ নয়। অন্য উপায়ে ( href="#") কোনও পৃষ্ঠা পুনরায় লোডের কারণ হয়ে থাকে, এটিও ভুল।

— রাইস ভ্যান ডার ওয়েয়ারডেন

এটি আইই 9 কে হ্যান্ড কার্সার না দেখায় makes href=""এটি সমাধান করে ব্যবহার করে।

— জুম্পি এনআর

@ জ্যাম্পি, লিঙ্কের সাহায্যে সিএসএস ব্যবহার করা যায়। প্রদত্ত এই উত্তরটি এটি করার আনুষ্ঠানিক AngularJS উপায়।

— এনেটেম্প

# টি হ্যাশ লিঙ্কের মতো আচরণ করবে।

— শেরিফডেরেক

<a href="javscript:void(0)" ng-click="logout()">Sign out</a>খুব ভাল আপনার সেবা করবে

— মারিওস ফাকিওলাস

Answer 3

আপনি সরাসরি আপনার টেম্পলেটে ক্লিক ইভেন্টের ডিফল্ট আচরণকে সরাসরি আটকাতে পারেন।

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

কৌনিক ডকুমেন্টেশন প্রতি ,

এনজি-ক্লিক এবং এনজিফোকাসের মতো নির্দেশাবলী সেই অভিব্যক্তিটির আওতায় একটি $ ইভেন্ট অবজেক্টকে প্রকাশ করে।

Comments

এটি একটি দুর্দান্ত সমাধান। যদি আপনার কোনও হেরেফ থাকে তবে এটি নতুন ট্যাবে খুলতে ডান ক্লিক করতে পারেন, তবে বাম ক্লিকে এটি এনজি-ক্লিককে কল করে। ঠিক আমি কী সন্ধান করছিলাম

— টম গ্রান্ট

আবারও একটি দুর্দান্ত উত্তর। বাম এবং ডান উভয় ক্লিক কাজ

— জে জে জে

রাউটিং ট্রিগার না করে বুটস্ট্র্যাপ কারাউসেল নিয়ন্ত্রণের অনুমতি দেওয়ার জন্য দুর্দান্ত কাজ করেছেন। ধন্যবাদ!

— জেসন ম্যাগগার্ড

পারফেক্ট! আমি লিঙ্কগুলি চালিয়ে যেতে এবং গুগলে আরও সূচক পেতে পারি এবং অ্যাজ্যাক্সে কল করতে এনজি-ক্লিক ব্যবহার করতে পারি। ধন্যবাদ।

— গিলহর্ম আইএ

দুর্দান্ত সমাধান, দ্রুত এবং দরকারী। ধন্যবাদ!

— জোসে রোচা

Answer 4

এখানে আরও একটি সমাধান:

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

অর্থাত্ href বৈশিষ্ট্য থেকে # সরিয়ে দিন remove

Comments

জিজ্ঞাসিত প্রশ্নের জন্য, এটি সমাধান হওয়া উচিত। পাশাপাশি কৌণীয় 1.1.5 এ কাজ করেছেন

— সিন্ড্রে

দেখে মনে হচ্ছে <a href="" ng-click=""> অ্যানড্রয়েড 2.3.x ব্রাউজারে এনজি-ক্লিককে আটকাবে। আমি অবশেষে <a href="javascript:void(0)" ng-click="">

— duckegg

ডেকেগের পরামর্শটি সেরা

— জিও ভাইপাদিক

Answer 5

আরও একটি ইঙ্গিত। আপনার যদি সত্যিকারের ইউআরএল প্রয়োজন হয় (ব্রাউজার অ্যাক্সেসিবিলিটি সমর্থন করার জন্য) আপনি নিম্নলিখিতগুলি করতে পারেন:

টেমপ্লেট:

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

নির্দেশে:

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

এইভাবে আপনার লিঙ্ক ক্লিক করা কোডে () লিঙ্কে নেভিগেট করার আগে কার্যকর করার সুযোগ থাকবে

Comments

এই সমাধানটি কাজ করে এবং কেবল বাম ক্লিকের আচরণ পরিবর্তন করে, ডান ক্লিকটি অক্ষত থাকে (কনটেক্সট মেনু) সহ href- এ কোনও লিঙ্কের সম্ভাবনা। সুতরাং এটি TooMuchTenacious এর তুলনায় আরও সাধারণ সমাধান, যা আসলে প্রশ্নের উত্তর আরও সরাসরি দেয়।

— এক্সকোম

Answer 6

কৌণিক ভাষায়, <a>নির্দেশাবলী । যেমন, আপনার যদি খালি 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();
      }
    });

নিখোঁজ দৃশ্যের একটি প্ল্যানকর এখানে প্রদর্শন করছে href।

Answer 7

এটি IE 9 এবং AngularJS v1.0.7 এ আমার জন্য কাজ করেছে:

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

কাজের সমাধানের জন্য ডেকেগেসের মন্তব্যে ধন্যবাদ !

Comments

কাজ করে, লিঙ্কটি আপনার url পরিবর্তন করে না এবং ভিজিট হিসাবে চিহ্নিত করা হয়নি। সর্বোত্তম উত্তর!

— জিম 109

Answer 8

এই প্রশ্নের এখানে অনেক উত্তর রয়েছে তবে মনে হচ্ছে এখানে আসলে কী চলছে তা নিয়ে কিছুটা বিভ্রান্তি রয়েছে।

প্রথমত, আপনার ভিত্তি

"href Angular.js এ এনজি-ক্লিককে ওভাররাইড করে"

ভূল. আসলে যা ঘটছে তা হ'ল আপনার ক্লিকের পরে ক্লিক ইভেন্টটি প্রথমে কৌণিক দ্বারা পরিচালনা করা হয় ( ng-clickকৌণিক 1.x এবং clickকৌণিক 2.x + তে নির্দেশ দ্বারা সংজ্ঞায়িত ) এবং তারপরে এটি প্রচার অব্যাহত রাখে (যা শেষ পর্যন্ত ব্রাউজারটিকে নেভিগেট করতে চালিত করে url সহ সংজ্ঞায়িত hrefঅ্যাট্রিবিউট)। (দেখুন এই জাভাস্ক্রিপ্ট ইভেন্ট প্রসারণ সম্পর্কে আরো জন্য)

আপনি যদি এড়াতে চান, তবে ইভেন্ট ইভেন্ট ইন্টারফেসের preventDefault()পদ্ধতিটি ব্যবহার করে আপনার ইভেন্টের প্রচার বাতিল করা উচিত :

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

(এটি খাঁটি জাভাস্ক্রিপ্ট কার্যকারিতা এবং কৌনিকের সাথে কিছুই করার নয়)

এখন, এটি ইতিমধ্যে আপনার সমস্যার সমাধান করবে তবে এটি অনুকূল সমাধান নয়। কৌণিক, যথাযথভাবে, এমভিসি প্যাটার্ন প্রচার করে । এই সমাধানের সাথে, আপনার এইচটিএমএল টেমপ্লেটটি জাভাস্ক্রিপ্ট যুক্তির সাথে মেশানো হয়েছে। আপনার এটিকে যথাসম্ভব এড়াতে চেষ্টা করা উচিত এবং আপনার যুক্তিটি আপনার কৌনিক নিয়ামকের মধ্যে রাখা উচিত। সুতরাং একটি ভাল উপায় হতে পারে

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

এবং আপনার লগআউট পদ্ধতিতে:

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

এখন ক্লিক ইভেন্টটি ব্রাউজারে পৌঁছাবে না, সুতরাং এটি দ্বারা নির্দেশিত লিঙ্কটি লোড করার চেষ্টা করবে না href। (তবে মনে রাখবেন যে ব্যবহারকারী যদি লিঙ্কটিতে ডান ক্লিক করে এবং সরাসরি লিঙ্কটি খোলে, তবে কোনও ক্লিক ইভেন্ট হবে না Instead পরিবর্তে এটি সরাসরি hrefবৈশিষ্ট্যের দ্বারা নির্দেশিত ইউআরএলটি লোড করবে ))

ব্রাউজারগুলিতে পরিদর্শন করা লিঙ্ক রঙ সম্পর্কে মন্তব্য সম্পর্কে। আবার কৌণিকের সাথে এটির কোনও সম্পর্ক নেই, যদি href="..."আপনার ব্রাউজার দ্বারা ডিফল্টরূপে আপনার ব্রাউজারের দ্বারা দেখা একটি ইউআরএলগুলিতে পয়েন্ট থাকে তবে লিঙ্কের রঙটি আলাদা হবে। এটি সিএসএস দ্বারা নিয়ন্ত্রিত হয় : পরিদর্শক নির্বাচিত , আপনি এই আচরণটি ওভাররাইড করতে আপনার সিএসএস পরিবর্তন করতে পারেন:

a {
   color:pink;
}

পিএস 1 :

কিছু উত্তর ব্যবহার করার পরামর্শ দেয়:

<a href .../>

hrefএকটি কৌনিক নির্দেশ। যখন আপনার টেম্পলেটটি কৌণিক দ্বারা প্রক্রিয়া করা হয় তখন এটি রূপান্তরিত হবে

<a href="" .../>

এই দুটি উপায় মূলত একই।

Answer 9

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>

Answer 10

আমি মনে করি না আপনি href থেকে "#" অপসারণ করতে হবে। অ্যাঙ্গুলারজ 1.2.10 এর সাথে নিম্নলিখিত কাজ করে Following

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

Answer 11

আপনি এটি ব্যবহার করে দেখতে পারেন:

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

Answer 12

আমি আপনার জন্য একটি উদাহরণ যুক্ত করব যা আমার পক্ষে কাজ করে এবং আপনি এটি আপনার পছন্দমতো পরিবর্তন করতে পারেন।

আমি আমার নিয়ামকের অভ্যন্তরে বেলো কোড যুক্ত করি।

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

এবং আমার দেখার পৃষ্ঠার জন্য আমি বেলো কোড যুক্ত করব।

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

Answer 13

আপনি কি লগআউট ফাংশনটিতেই পুনঃনির্দেশ চেষ্টা করেছিলেন? উদাহরণস্বরূপ, আপনার লগআউট ফাংশনটি নীচে হিসাবে বলুন

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

তাহলে আপনি ঠিক থাকতে পারেন

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

Answer 14

অনুগ্রহপূর্বক এটি যাচাই করুন

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

 $scope.logout = function(event)


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

Answer 15

//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>

Answer 16

এটি আমার পক্ষে কাজ করে

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