J'ai ce code travaillant dans jQuery et j'essaie de le traduire en angulaire et c'est ce que je crois que cela devrait être mais que cela ne fonctionne pas? P> angular.module('twtscrollApp')
.controller('MainCtrl', function ($scope, $window) {
$window.on('scroll', function () {
angular.element('.parallax-background').css('top', '' + ($window.scrollTop() / 5) + 'px');
});
});
3 Réponses :
La raison de ce que vous avez ne fonctionne pas est parce que Angular.Leement ne fonctionne pas via des sélecteurs JQuery, cela ne fonctionne que via des noms de balises. Documentation
afin d'obtenir Ce que vous devez travailler, vous devriez devoir changer à: Cela étant dit, vous devriez vraiment envisager de le faire via une directive plutôt que dans le contrôleur, car il s'agit du lieu approprié pour mettre la manipulation DOM. Solution suggérée / recommandée:
Je suis d'accord avec la deuxième partie de cette réponse: utilisez une directive pour cela. Le contrôleur est en fait le mauvais endroit pour cela.
Vous pouvez utiliser la fonction de liaison de directives, qui vous renvoie l'élément lui-même, donc pas besoin de sélecteurs DOM.
p>
angular.module('myApp').directive('abc', function($timeout, $window) {
return {
restrict: 'EA',
link: function(scope, elem, attr) {
$window.on('scroll', function () {
elem.css(.......);
});
}
};
} Voici la meilleure approche. Contexte respossif de la parallaxe
Ses toujours mieux utiliser la directive pour injecter jQuery. Copier ci-dessous le code dans un fichier séparé de votre projet, utilisez cette balise div dans votre HTML
import { Directive, OnInit, ElementRef, Input, Renderer2, HostListener}from '@angular/core';
declare const $: any;
@Directive({
selector: '[appParallax]'
})
export class MyParallaxDirective implements OnInit {
@Input() imgSrc: string;
@Input() imgHeight: String = '70vh';
@Input() bgPosition: String = '50% 0';
@Input() bgSize: String = 'cover';
screenHeight: any;
screenWidth: any;
constructor(private renderer: Renderer2, private hostElement: ElementRef)
{ }
@HostListener('window:resize', ['$event'])
ngOnInit() {
this.innit();
this.getScreenSize();
}
getScreenSize(event?) {
this.screenWidth = window.innerWidth - 100;
const elem = this.hostElement.nativeElement;
if (this.screenWidth <= 1024) {
const $el = $(elem);
const x = Math.round((window.innerWidth / 16) * 9);
$el.css({ 'height': x + 'px' });
}
}
innit() {
const elem = this.hostElement.nativeElement;
this.renderer.setStyle(elem, 'height', this.imgHeight);
this.renderer.setStyle(elem, 'background-image', 'url' + '(' +this.imgSrc + ')');
this.renderer.setStyle(elem, 'background-position', this.bgPosition);
this.renderer.setStyle(elem, 'background-repeat', 'no-repeat');
this.renderer.setStyle(elem, '-webkit-background-size', this.bgSize);
this.renderer.setStyle(elem, 'background-size', this.bgSize);
this.renderer.setStyle(elem, '-moz-transform', 'translate3d(0, 0,0)');
this.renderer.setStyle(elem, '-webkit-transform', 'translate3d(0, 0, 0)');
this.renderer.setStyle(elem, 'transform', 'translate3d(0, 0, 0)');
$(function () {
const $el = $(elem);
$(window).on('scroll', function () {
const scroll = $(document).scrollTop();
$el.css({
'background-position': '50% ' + (-.4 * scroll) + 'px',
});
});
});
}
}
Cet utilisateur utilise angularjs non angular2 +