Wie jQuery-Code in nutzbare AngularJS Code

Question

Ich bin neu in AngularJS konvertieren und möchten Funktionalität für eine Login-Seite erstellen ähnlich, was Sie hier finden, wenn Sie auf die Schaltfläche ‚Passwort vergessen‘ Link:

http://bootsnipp.com/snippets/featured/login-amp-password-reminder#comments

Ist es am besten, eine Direktive zu verwenden, da dies Verhalten anstelle eines Controllers ist? Ich habe ziemlich viel versucht mit dem Erstellen eines Controllers dafür, aber während ich nach Hilfe zu diesem Thema suche, finde ich, dass die Verwendung eines Controllers dafür möglicherweise nicht der richtige Weg ist. Hier waren meine letzten Versuche, das nicht erfolgreich war (der Link nichts tut, wenn sie angeklickt):

auf Controller-Seite in einer js-Datei:

angular.module('mean.users') 
    .controller('SwitcherCtrl', ['$document', 
     function($document) { 
     $document.ready(function() { 
      $document.getElementById('olvidado').click(function (e) { 
       e.preventDefault(); 
       $document.getElementById('form-olvidado').toggle('500'); 
      }); 
      $document.getElementById('acceso').click(function (e) { 
       e.preventDefault(); 
       $document.getElementById('form-olvidado').toggle('500'); 
      }); 
     }); 
    } 
]) 

auf HTML-Seite, ich eingeschlossen ng-Controller = "SwitcherCtrl", wo notwendig.

Answer 1

Dank an alle, die geantwortet. Sie haben das Ding in die richtige Richtung geschleudert und ich konnte es verbessern, um zu der genauen Antwort zu kommen, die unten gezeigt wird.

Die HTML:

<div ng-controller="SwitcherCtrl"> 
    <div data-fold-toggle="active"> 
     <form id="login"> 
      <input type="email" ng-model="email" required=""> 
      <input type="password" ng-model="password" required=""> 
      <button type="submit">Login</button> 
      <a ng-click="active=!active">Forgot your password?</a> 
     </form> 
    </div> 
    <div data-fold-toggle="active" style="display: none;"> 
     <form id="forgotpw"> 
      <input type="email" ng-model="email" required=""> 
      <button type="submit">Reset Password</button> 
      <a ng-click="active=!active">Account Access</a> 
     </form> 
    </div> 
</div> 

Die Steuerung & Richtlinie:

.controller('SwitcherCtrl', function($scope) { 
    $scope.active = true; 
}) 
.directive('foldToggle', function() { 
    return { 
     restrict: 'A', 
     scope:{ 
      isOpen: '=foldToggle' 
     }, 
     link: function(scope, element) { 

      scope.$watch('isOpen', function(newVal,oldVal){ 
       if(newVal !== oldVal){ 
        element.toggle(200); 
       } 
      }); 
     } 
    }; 
}); 

Answer 2

Der JQuery-Ansatz ist mit AngularJS völlig inkompatibel. Die DOM-Manipulation ist nur in Direktiven in der Link-Funktion erlaubt, ansonsten ist es eine sehr schlechte Übung. Versuchen Sie von vorne anzufangen und JQuery zu vergessen. Die Magie von AngularJS passiert mit 2-Wege-Bindungen.

Sie könnten eine Direktive verwenden, mit einem Login-Controller und einem Factory/Service, um den Benutzernamen und das Passwort zu speichern und an die Datenbank zu senden. Für diesen Login ist JQuery definitiv nicht nötig. Sie können diese Frage hier überprüfen: AngularJS- Login and Authentication in each route and controller

edit: In Ihrer Frage oben, ist es nicht eine Richtlinie anstelle eines Controllers ist. Eine Direktive kann einen Controller haben, der auf einen bestimmten Bereich angewendet wird. Sie können das gleiche mit beiden tun, aber hängt davon ab, wie oft Sie dieses Login-Snippet wiederverwenden - ich denke, Sie werden es nicht brauchen, aber ich glaube, es ist immer noch eine gute Praxis, eins zu machen.

bearbeiten Sie 2: Wenn Sie dieses gelesen haben, tun Sie es bitte! Ich glaube, Sie werden die meisten Ihrer Fragen zu den zwei verschiedenen Technologien beantworten (Gegenteil davon, würde ich sagen). "Thinking in AngularJS" if I have a jQuery background? Auch da ich von JQuery Hintergrund kam zu folgte ich diese vier Ressourcen um und jetzt kann ich die meisten Dinge machen ich will:

• Einführung in Angularjs in 50 Beispiele (Teil 1) https://www.youtube.com/watch?v=TRrL5j3MIvo

• Einführung in Angularjs in 50 Beispiele (Teil 2) https://www.youtube.com/watch?v=6J08m1H2BME

• Freie Interactive AngularJS für Anfänger lernen https://www.codeschool.com/courses/shaping-up-with-angular-js

• Weitere AngularJS-Ressourcen nach Thema Eierkopf.io https://egghead.io/technologies/angularjs

bearbeiten 3: Da ich gutes Interesse an meiner Antwort sah habe ich beschlossen, es mit zu erweitern, was/besten Praktiken zu vermeiden, so dass der Code mehr prüfbar, wartbar und leichter zu Angular 2 zu migrieren:

• 5 Richtlinien für in Scope Suppe Vermeidung Angular http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html

• No $ Umfang Suppe, bindToController in AngularJS https://toddmotto.com/no-scope-soup-bind-to-controller-angularjs/

• Angular JS - Sie sollten $ watch in Ihren Controllern wahrscheinlich nicht verwenden. http://www.benlesh.com/2013/10/title.html

• 11 Tipps AngularJS Leistung http://www.alexkras.com/11-tips-to-improve-angularjs-performance/

Answer 3

Sie können verbessern das ausprobieren, verwendet es Richtlinien und html. Ob der Benutzername oder der vergessene Benutzername angezeigt wird, hängt vom Status einer Bereichsvariablen in der Verknüpfungsfunktion von directors ab.

Fiddle

<div ng-app="myApp"> 

    <div my-auth> 

     <div ng-show="active"> 
      <form name="login"> 
       <input type="email" ng-model="email" placeholder="your@email.com" required /> 
       <input type="password" ng-model="passwd" required /> 
       <button ng-disabled="!login.$valid">Login</button> 
      </form> 
      <a href="#" ng-click="toggle()">forgot password?</a> 
     </div> 

     <div ng-show="!active"> 
      <form name="forgot"> 
       <input type="email" ng-model="email" placeholder="your@email.com" required /> 
       <button ng-disabled="!forgot.$valid">Reset Password</button> 
      </form> 
      <a href="#" ng-click="toggle()">access</a> 
     </div> 
    </div> 
</div> 

Die Richtlinie

angular.module('myApp', []) 
.directive('myAuth', function(){ 
    return { 
     link: function(scope, elem, attr){ 
      scope.active = true; 
      scope.toggle = function(){ 
       scope.active = !scope.active; 
      }; 
     } 
    }; 
});