Come convertire codice jQuery in codice AngularJS utilizzabili

Question

Sono nuovo di AngularJS e vorrebbe creare funzionalità per una pagina di login simile a quello che si trova qui, quando si fa clic sul 'Password dimenticata' link:

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

È meglio usare una direttiva, poiché questo è comportamentale, invece di un controller? Ho provato parecchio a creare un controller per questo, ma mentre cerco aiuto sull'argomento, trovo che usare un controller per questo non sia la strada da percorrere. Qui era mie ultime prove che non ha avuto successo (il link non fa nulla quando si fa clic):

su lato controllore in un file js:

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'); 
      }); 
     }); 
    } 
]) 

sul lato html, ho incluso ng-Controller = "SwitcherCtrl" dove necessario.

Answer 1

Grazie a tutti coloro che hanno risposto. Hanno dato il via a questa cosa muovendosi nella giusta direzione e sono stato in grado di migliorarlo per arrivare alla risposta esatta mostrata di seguito.

Il codice 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> 

La direttiva controller &:

.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

L'approccio JQuery è completamente incompatibile con AngularJS. La manipolazione del DOM è consentita solo nelle direttive nella funzione di collegamento, altrimenti è una pratica molto negativa. Prova a ripartire da zero e dimentica JQuery. La magia di AngularJS avviene con binding a 2 vie.

È possibile utilizzare una direttiva, con un controller di accesso e un factory/servizio per conservare nome utente e password e inviarlo al database. Per questo login non c'è assolutamente bisogno di JQuery. È possibile verificare questa domanda qui: AngularJS- Login and Authentication in each route and controller

edit: Nella sua domanda di cui sopra, non è una direttiva, invece di un controller. Una direttiva può avere un controller che viene applicato a un ambito specifico. Potresti fare la stessa cosa con entrambi, ma dipende da quante volte riutilizzerai questo frammento di accesso - immagino che non ne avrai bisogno ma credo che sia ancora buona pratica crearne uno.

modifica 2: se non hai letto questo, per favore fallo! Credo che risponderete alla maggior parte delle vostre domande sulle due diverse tecnologie (opposte direi). "Thinking in AngularJS" if I have a jQuery background? Anche quando sono venuto da Jquery sfondo troppo, ho seguito queste quattro risorse in ordine e ora posso fare la maggior parte delle cose che voglio:

• Introduzione alla Angular.js in 50 esempi (parte 1) https://www.youtube.com/watch?v=TRrL5j3MIvo

• Introduzione alla Angular.js in 50 Esempi (parte 2) https://www.youtube.com/watch?v=6J08m1H2BME

• AngularJS interattivi gratuiti di apprendimento per principianti https://www.codeschool.com/courses/shaping-up-with-angular-js

0.123.516,41 mila

• Altre risorse AngularJS per argomento egghead.io https://egghead.io/technologies/angularjs

Edit 3: Da quando ho visto un buon interesse nella mia risposta ho deciso di espanderlo con ciò al fine di evitare le migliori pratiche/in modo che il codice è più verificabile, gestibile e più facile da migrare verso angolare 2:

• 5 Linee guida per evitare Soup Scope in angolare zuppa http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html

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

• Angular JS - probabilmente non dovresti usare $ watch nei tuoi controller. http://www.benlesh.com/2013/10/title.html

• 11 suggerimenti per migliorare AngularJS prestazioni http://www.alexkras.com/11-tips-to-improve-angularjs-performance/

Answer 3

Si può provare questo fuori, utilizza le direttive e html. Indica se il nome utente di accesso o dimenticato visualizzato è legato allo stato di una variabile di ambito nella funzione di collegamento delle direttive.

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> 

La direttiva

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