[英]Angular directive won't update boolean
我的控制器中有一个函数可以切换类,并将$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.menuClose
。
这个:
$scope.logocollapsed == true;
应该是这样的:
$scope.logocollapsed = true;
==
是比较运算符,而=
是赋值运算符。
你有几个问题。
如另一个答案中所述,您正在进行相等比较,而不是分配@ $scope.logocollapsed == true;
必须执行scope.$apply
才能在scroll事件中手动触发摘要周期。
element.bind( 'scroll', function() { if (! $('.sidebar-menu').hasClass('collapsed')){ if (raw.scrollTop > 200) { scope.menuClose(); scope.$apply(); } } });
在控制器中执行DOM操作或显式DOM访问被认为不是一个好习惯。 您可能应该将该代码if(! $('.sidebar').hasClass('collapsed')) {...
移至指令链接器函数。 并且只有控制器功能设置该标志。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.