Angular指令不会更新boolean

时间:2015-01-19 23:27:15

标签: javascript angularjs

我的控制器中有一个切换类的函数,并将值$scope.logocollapsed更改为 true 以隐藏元素。当我使用ng-click来调用它按设计工作的函数时,会添加该类并将值设置为true。

我做了一个指令来切换类,并更改$scope.logocollapsed的值,这是在滚动事件上调用的,它会切换类,但它不会更改{{1}的值}

这是我的指示:

$scope.logocollapsed

这是我控制器内部的样子。

                .directive('scrollspy', function () {
                    return {
                        restrict: 'A',
                        link: function (scope, element, attrs) {
                            var raw = element[0];
                            console.log('loading directive');

                            element.bind( 'scroll', function() {
                                //console.log(raw.scrollTop);

                                if (! $('.sidebar-menu').hasClass('collapsed')){
                                    if (raw.scrollTop > 200) {
                                        scope.menuClose();
                                    }
                                }
                            });
                        }
                    };
                }) 

同样,我不确定为什么我的指令能够运行$scope.menuClose = function(bool) { if(! $('.sidebar').hasClass('collapsed')) { $('.sidebar-menu').addClass('collapsed'); $scope.logocollapsed == true; } }; 函数并处理该类,但它不会将值更新为false。

我感谢任何建议

2 个答案:

答案 0 :(得分:1)

乍一看,问题似乎在$scope.menuClose内。

此:

$scope.logocollapsed == true;

应该是这样的:

$scope.logocollapsed = true;

==是比较运算符,而=是赋值运算符。

答案 1 :(得分:1)

你有几个问题。

  • 正如在另一个答案中所提到的,你正在进行平等比较,而不是分配@ $scope.logocollapsed == true;

  • 您必须执行scope.$apply才能在滚动事件中手动触发摘要周期。

    element.bind( 'scroll', function() { if (! $('.sidebar-menu').hasClass('collapsed')){ if (raw.scrollTop > 200) { scope.menuClose(); scope.$apply(); } } });

  • 在控制器中执行DOM操作或显式DOM访问并不是一种好习惯。您应该将代码if(! $('.sidebar').hasClass('collapsed')) {...移动到指令链接器函数。并让控制器功能只设置标志。