Question

我是AngularJS的新手，并制作了一个指令，在窗口滚动时，它应该修改body标签的css样式中的值。这是指令：

app.directive("parallaxDir", function ($window, $document) {
    return function (scope, element, attrs) {
        angular.element($window).bind("scroll", function () {
            console.log('Scroll in da directive');
            ** Here I want to modify the body tag css style to: **
            ** background-position-y = $window.pageYOffset / 2) + "px") **
        });
    };
});

我该怎么做？

提前致谢。

Answer 1

我偶然发现了一个解决方案： http://corpus.hubwiz.com/2/angularjs/16725136.html

最终代码如下：

app.directive("parallaxDir", function ($window, $document) {
    return function (scope, element, attrs) {
        angular.element($window).bind("scroll", function () {
            var body = angular.element(document).find('body');
            body.css("background-position-y", ($window.pageYOffset / 2) + "px");
            scope.$apply();
        });
    };
});

Answer 2

晚了聚会，但是接受的答案中的jqLite find方法必须搜索所有将body直接存储在$document上的孩子。使用$document[0].body会更有效。

您的最终代码如下：

app.directive("parallaxDir", function ($window, $document) {
    return function (scope, element, attrs) {
        angular.element($window).bind("scroll", function () {
            var body = $document[0].body;
            body.css("background-position-y", ($window.pageYOffset / 2) + "px");
            scope.$apply();
        });
    };
});

从AngularJS指令更改body css样式属性

2 个答案: