Transposition JQuery vers Angular (1)

**kendras** · 17/01/2016, 14h23

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et dans le code javascript, j'ai ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

MasterController.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var MasterController = function ($scope, $window) {
}
MasterController.$inject = ['$scope'];

J'essaye d'avoir une architecture propre.

Merci pour votre aide

**slim** · 18/01/2016, 14h25

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.

**kendras** · 20/01/2016, 15h28

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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