Question

我正在使用AngularJS + ngRoute模块+ Angular Bootstrap UI创建应用程序。我已经创建了index.html页面和一些模板，这些模板通过放置在index.html中的ng-view指令加载。

目前我正在尝试基于此插件对背景图像进行视差效果： https://github.com/brettdonohoo/angular-parallax

http://brettdonohoo.com/angular-parallax/index.html

在我的一个视图中，我有DIV元素，它上面有视差指令。

<div parallax-background parallax-offset="0.4" parallax-ratio="0.7" class="slide" style="background-image: url('{{covers[0].image}}')" ng-click="open(covers[0])"></div>

问题是 - 当我加载应用程序时，指令在DIV元素上正确触发，但背景位置css不会改变。当我滚动窗口 - 背景位置更改确定。但我也需要将这个职位应用于初始变革。

当我将DIV元素从模板中移出到index.html时，它可以工作。但当然我希望它只显示一个子页面。

我的指示：

.directive('parallaxBackground', ['$window',
    function ($window) {
        return {
            restrict: 'A',
            transclude: true,
            template: '<div ng-transclude></div>',
            scope: {
                parallaxRatio: '@',
                parallaxOffset: '@',
            },
            link: function ($scope, elem, attrs) {
                var setPosition = function () {
                    var calcValY = (elem.prop('offsetTop') - $window.pageYOffset) * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1) - ($scope.parallaxOffset ? $scope.parallaxOffset : 0) * $window.innerHeight;
                    elem.css('background-position', "50% " + calcValY + "px");
                };

                angular.element($window).bind('load', function (e) {
                    setPosition();
                    $scope.$apply();
                });

                angular.element($window).bind("scroll", setPosition);
            } // link function
        };
    }
]);

AngularJS视差效应指令不适用于应用程序负载

0 个答案: