Wie kann ich mein AngularJS-link deaktiviert?

Mein code sieht wie folgt aus:

    <a ng-disabled="!access.authenticated"
            data-ng-class="{ 'current': $state.includes('home'), 'disabled': !access.authenticated } "
            href="/home/overview"
            title="Home">
        <i class="fa fa-home fa-fw"></i>
    </a>

Möchte ich es so machen, dass wenn der Zugang.authentifiziert ist false, dann wird der link nicht angeklickt werden kann. Was ich dachte, war die änderung der Verknüpfung auf eine Taste und dann stylen es wie ein link. Allerdings funktioniert dies nicht, da eine Taste nicht dazu führen, die URL der Seite zu ändern.

    <button ng-disabled="!access.authenticated"
            data-ng-class="{ 'current': $state.includes('home'), 'disabled': !access.authenticated } "
            href="/home/overview"
            title="Home">
        <i class="fa fa-home fa-fw"></i>
    </button>

Kann mir jemand sagen, wie ich das tun kann, was ich brauche ?

ng-href ?????
Ich denke, Sie könnten versuchen, so etwas wie dieses durch das schreiben einer benutzerdefinierten Richtlinie: stackoverflow.com/questions/23366134/... und preventDefault
Hi Royi - Können Sie erklären, was Sie meinen mit Ihrem Kommentar. Beachten Sie, dass ich mit ui-router. Nicht sicher, ob das macht einen Unterschied. Dank
er sagt, Sie sollten wechseln fro href ng-href-oder data-ng-href
Warum sollten Sie verwenden ngHref hier? Es gibt keine Bindung in Ihrer href Wert. ngHref tun nichts hier.

InformationsquelleAutor | 2014-05-04

  1. 8

    Hier ist eine einfache Richtlinie, die fängt das click-Ereignis und verhindert, dass die Seite übergang, basierend auf einer scope-variable:

    module.directive('myLink', function() {
  return {
    restrict: 'A',
    scope: {
      enabled: '=myLink'
    },
    link: function(scope, element, attrs) {
      element.bind('click', function(event) {
        if(!scope.enabled) {
          event.preventDefault();
        }
      });
    }
  };
});

    Können Sie es verwenden, wie diese:

    <a my-link="linkEnabled" data-ng-class="{'disabled': !linkEnabled}" href="/home/overview">
  <i class="fa fa-home fa-fw">Link</i>
</a>

    Hier ist eine demo

    Danke @sebastian!! Dieses Problem ist mir!:)

    InformationsquelleAutor Sebastian

  2. 5

    css:

     .inactive {
   color: #ccc;
   pointer-events: none;
   cursor: default;
 }

    html:

    <a href="some.html" ng-class="access.authenticated ? '' : 'inactive'">some link</a>

    Check-out diese Geige.

    Auch mit pointer-events: none, der link kann immer noch mit der Tastatur ausgewählt werden.

    InformationsquelleAutor Kludge

  3. 0

    Können Sie es tun, haben Sie mehrere Möglichkeiten:

    • verwenden ng-disabled
    • verwenden ng-show
    • manipulieren mit URL

    <a ng-disabled="!access.authenticated" href="/home/overview"><i class="fa fa-home fa-fw"></i></a>

    oder

    <a ng-show="access.authenticated" href="#"><i class="fa fa-home fa-fw"></i></a>
    <a ng-show="!access.authenticated" href="/home/overview"><i class="fa fa-home fa-fw"></i></a>

    oder

    <a href="{{getUrl(access.authenticated)}}"><i class="fa fa-home fa-fw"></i></a> - wo getUrl() - Methode für die Lösung Anfrage-url

    ng-disabled eigentlich nicht funktionieren, weil in der Wende @disabled auf eine <a> tag nichts tut.

    InformationsquelleAutor Lugaru

Schreibe einen Kommentar