Question

我有这个指令，我正努力开始工作。这是应该发生的事情。在初始页面加载时，它运行navCheck（）函数。如果location.path（）==='/ index'，它会添加一些类来更改滚动。如果location.path（）不是'/ index'，它应该只设置nav的类而不启用滚动。我通过使用$ locationChangeSuccess在初始加载后完成此操作。一切都以预期的方式执行，但即使location.path（）不是'index'，它仍然会添加滚动绑定。我错过了什么？

.directive('changeClass', ['$window', '$location', '$rootScope',
    function ($window, $location, $rootScope) {
        var offset = "50";

        return {
            restrict: 'A',
            link: function(scope, element) {
                var navCheck = function() {
                    if ($location.path() === "/index") {
                        console.log('this path is index');
                        angular.element($window).bind("scroll", function () {
                            if (this.pageYOffset >= parseInt(offset)) {
                                element.removeClass("navbar-transparent");
                                element.addClass("navbar-primary")
                            } else {
                                element.addClass("navbar-transparent");
                                element.removeClass("navbar-primary")
                            }
                        });
                    } else {
                        console.log('anything other than index');
                        element.removeClass("navbar-transparent");
                        element.addClass("navbar-primary")
                    }
                };
                $rootScope.$on('$locationChangeSuccess', function() {
                    navCheck();
                    console.log('location changed')
                });
                navCheck();
            }
        };
    }])

Answer 1

.directive('changeClass', ['$window', '$location', '$rootScope',
    function ($window, $location, $rootScope) {
        var offset = "50";

        return {
            restrict: 'A',
            link: function(scope, element) {
                var indexOnScroll= function () {
                            if (this.pageYOffset >= parseInt(offset)) {
                                element.removeClass("navbar-transparent");
                                element.addClass("navbar-primary")
                            } else {
                                element.addClass("navbar-transparent");
                                element.removeClass("navbar-primary")
                            }
                        };
                var navCheck = function() {
                    if ($location.path() === "/index") {
                        console.log('this path is index');
                        angular.element($window).on("scroll",indexOnScroll);
                    } else {
                        console.log('anything other than index');
                        angular.element($window).off("scroll",indexOnScroll);
                        element.removeClass("navbar-transparent");
                        element.addClass("navbar-primary")
                    }
                };
                $rootScope.$on('$locationChangeSuccess', function() {
                    navCheck();
                    console.log('location changed')
                });
                navCheck();
            }
        };
    }])

您忘记unbind条件下的滚动else。我更喜欢on和off而不是bind和unbind，因为jQuery正式弃用了.on以外的所有绑定语法。

AngularJS指令的行为不符合预期？

1 个答案: