Macht Verhalten von hyperlinks bedingte in AngularJS

In einer Angular-app, ich habe eine Liste von hyperlinks, die müssen das folgende Verhalten:

  • wenn eine bestimmte Bedingung vorhanden ist (z.B. wenn ein bestimmter cookie hat einen Wert x), ein Klick auf den hyperlink geöffnet werden soll ein modales Fenster;

  • wenn diese Bedingung nicht erfüllt ist (z.B. wenn der cookie-Wert y), wird der hyperlink sollte act in seiner üblichen Art und Weise und öffnet den link in einem neuen tab.

Die hyperlinks werden wie folgt formatiert:

<a ng-href="{{article.url}}" target="_blank" ng-click="myFunction()">
  {{article.title}}
</a>

Ich bin verwirrt, wie zur Umsetzung eines solchen Verhaltens. Wenn ich beide ng-href und ngclick Richtlinien, dann ng-href wird die url einfügen und jeder Klick öffnet eine Seite in einem neuen tab. Wenn ich entfernen Sie die ng-href Richtlinie, dann ist der einzige Weg, um einen link zu öffnen in einem anderen tab wird durch javascript, aber dies wird verhindert, indem die meisten Browser. Ich konnte nicht denken, einen Weg, um ng-href bedingt (zum Beispiel das schreiben <a ng-href="myCondition === true ? {{article.url}} : '#'"> funktioniert nicht).

Könnten Sie bitte einen Weg vorschlagen, wie die Implementierung einer solchen Funktionalität in Eckige?

  • Scheint, wie Sie bedingt müssen, oder entfernen Sie die target Attribut. Vielleicht mal hier gucken? stackoverflow.com/questions/23584201/...
  • behandeln Sie die Logik in den controller, ob redirect oder open modal popup
InformationsquelleAutor azangru | 2015-02-08
  1. 11

    Dieser arbeitete für mich

    <a ng-href='{{(element.url.indexOf("#")>-1) ? element.url : element.url + "client_id="}}{{credible.current_client_info.client_id}}'>{{element.title}}</a>
    InformationsquelleAutor Sage
  2. 2

    Hier ist ein etwas anderer Ansatz, der arbeitete für mich, nicht verwenden, ng-href an alle:

    HTML:

    <a ng-click="myFunc()">{{article.title}}</a>

    Controller:

    $scope.myFunc = function() {
  if (myCondition){
    window.open($scope.article.url,'_self',false);
  }
  window.open("/#/",'_self',false);
};
    InformationsquelleAutor Vali D
  3. 1

    Hier ist was ich kam mit. Es sieht irgendwie hässlich, also, wenn Sie bessere Vorschläge haben, sind Sie sehr willkommen:

    Schrieb ich zwei separate Anker-tags mit unterschiedlichen Verhaltensweisen und machte Winkel zwischen Ihnen wählen, je nachdem, ob oder nicht die notwendige Bedingung erfüllt ist:

          <a href="#" ng-if="checkCookies() === 'show popup'" ng-click="openArticle(article)">
        {{$parent.article.title}}
      </a>

      <a ng-href="{{$parent.article.url}}" target="_blank" ng-if="checkCookies() === 'no popup'">
        {{$parent.article.title}}
      </a>

    Und in der javascript-Datei, die ich schrieb, die checkCookies() - Funktion, die sucht nach dem Wert der besonderen cookie.

    InformationsquelleAutor azangru
Schreibe einen Kommentar