Transposition JQuery vers Angular (1)

Version imprimable

17/01/2016, 14h23
kendras

Transposition JQuery vers Angular (1)
Bonjour,

j'ai une maquette qui a été faite avec du JQuery, et j'essaye de la porter en angularjs

ça se met en place doucement, mais je bute sur des choses relativement simple comme :

Dans ma mage "Master.html", j'ai une balise comme ceci

Code:

<span class="backtotop">X </span>

Et dans le code javascript, j'ai ceci :
Code:

1 2 3 jQuery('.backtotop').click(function(){ jQuery('html, body').animate({scrollTop: 0}, 1000); });
Comment faire pour le porter en angular ?

En sachant que pour l'instant, mon architecture est la suivante :
Master.html
Code:

1 2 3 4 5 6 7 8 <!DOCTYPE HTML> <html data-ng-app="MyApp" data-ng-controller="MasterController" lang="fr"> ... <body> ... <span class="backtotop">X </span> </body> </html>
MyApp.js
Code:

1 2 3 var MyApp= angular.module('MyApp', ['ui.router']); MyApp.controller('MasterController', MasterController);
MasterController.js
Code:

1 2 3 var MasterController = function ($scope, $window) { } MasterController.$inject = ['$scope'];
J'essaye d'avoir une architecture propre.

Merci pour votre aide
18/01/2016, 14h25
slim

Salut!

Je pourrais presque te proposer de créer ta propre directive mais cela serait dommage puisqu'il en existe déjà.
En ce qui me concerne, j'utilise celle-ci : ngSmoothScroll qui fonctionne plutôt bien.

Au final, j'ai crée ma directive :

Code:

1
2
3
4
5
6
7
8
9
10
11
MyApp.directive("backtotop", function () {
    return {
        restrict: 'A',
        link: function (scope, $elm) {
 
            $elm.on('click', function () {
                $('html,body').animate({ scrollTop: 0 }, 1000);
            });
        }
    };
});

20/01/2016, 16h00
slim
Une directive avec du jQuery, ça sent jamais bon... Et il y a un dicton indien qui dit : "il ne faut jamais réinventer la roue...." :)
Citation:
Envoyé par ngSmoothScroll

Clean: No classes are added, no jQuery is required, no CSS files or configuration is needed