【问题标题】:Angular directive won't update booleanAngular 指令不会更新布尔值
【发布时间】:2015-01-19 23:27:14
【问题描述】:

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

我做了一个指令来切换类,并改变$scope.logocollapsed的值,这是在滚动事件上调用的,它会切换类,但是它不会改变$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;
 }
};

同样,我不确定为什么我的指令能够运行 menuClose() 函数并处理类,但它不会将值更新为 false。

感谢任何建议

【问题讨论】:

  • $scope.logocollapsed == true; 应该是 $scope.logocollapsed = true;(一个等号而不是两个)

标签: javascript angularjs


【解决方案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')) {... 移至指令链接器函数。并让控制器功能只设置标志。

【讨论】:

  • 谢谢,scope.$apply(); 成功了。我确实最终将逻辑移了过来,周围似乎好多了。如果其他人遇到类似问题,还有更多信息 here
  • @AndySanchez 欢迎您。我将在答案中连接链接。正如我所说,尽量避免在控制器中放置任何特定于 DOM 的逻辑。
【解决方案2】:

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

这个:

$scope.logocollapsed == true;

应该是这样的:

$scope.logocollapsed = true;

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-09-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-22
    • 2020-03-03
    • 1970-01-01
    相关资源
    最近更新 更多