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

Question

我有一个关于这个问题的 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;

 }

并在它工作的超时内调用它，但如果可以的话，我想避免这种情况。

我错过了什么？

Answer 1

Timeout 有它自己的作用域，因为它是一个闭包，所以 $scope.open = false 不会更新你的控制器 $scope.open 变量，你应该避免使用 timeout for 来更新作用域变量。您应该使用 bind as 绑定全局范围 -hideIt: function() {  this.timer = $timeout(function() {        this.open = false;      }.bind(this), 50);}

Answer 2

在您的超时函数中，this不引用 Dropdown 对象，而是可能引用该window对象。在 javascript 中，this总是指调用函数的对象，而不是定义它的对象。当 $timeout 调用您的回调函数时，它会使用 Dropdown 对象以外的其他对象，因为它不知道该对象。您需要this将父函数中的值捕获为闭包变量，或者使用angular.bind将回调函数绑定到 Dropdown 对象