javascript - 无法在超时内设置 AngularJS 范围变量

标签 javascript angularjs

<分区>

我有一个关于这个问题的 jsfiddle。 https://jsfiddle.net/uvtw5kp1/4/

$scope.Dropdown = {
  open: false,
  searchValue: "",

  timer: null,

  hideIt: function() {

    this.timer = $timeout(function() {
      alert("timeout happened the value will not change");
      this.open = false;
    }, 50);
  },
  hideItNotimer: function() {

    this.open = false;

  },
  showIt: function() {
    $timeout.cancel(this.timer);
    this.open = true;
  }
};

当我在 ng-mouseout 上调用 Dropdown.hideItNotimer() 时没有问题,但是当我调用 Dropdown.hideIt() 时变量没有设置。我添加了一个警报以确保计时器正常工作,并且我尝试在之后执行 scope.apply 。起作用的是在计时器内调用范围级别的函数:

像这样:

 $scope.setDropdownHidden = function(){
   $scope.Dropdown.open = false;
 }

并在有效的超时时间内调用它,但如果可以的话,我想避免这种情况。

我错过了什么?

最佳答案

在您的超时函数中,this 不引用 Dropdown 对象,而是可能引用 window 对象。在 javascript 中,this 总是引用调用函数的对象,而不是定义它的对象。当 $timeout 调用您的回调函数时,它将使用您的 Dropdown 对象以外的其他对象来执行此操作,因为它不知道该对象。

相关:Javascript closures and this

您需要在父函数中捕获 this 的值作为闭包变量,或者使用 angular.bind 将回调函数绑定(bind)到 Dropdown 对象

关于javascript - 无法在超时内设置 AngularJS 范围变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57260412/

相关文章:

javascript - sailsjs cors 错误请求仍然通过 Controller

javascript - 为事件创建单元测试

javascript - 使用 JavaScript 更改同名的多个类?

javascript - 使用 Angular-JS ng-disabled

javascript - 无类型函数调用可能不接受类型参数 - Angular 5 http 调用

javascript - Jquery 未在页面加载时运行

javascript - 如何使 EXT JS 模型和代理存储工作? (请帮忙!)

angularjs - Bootstrap 模式打开时如何防止滚动正文内容

javascript - 清除输入时如何在angularjs中使用select2-removed of select2触发事件

javascript - 如何在ES6中将$resourcefactory重写为类?