从Angular中的指令中查看控制器的属性

Question

我正试图从链接函数中的相关指令中查看控制器的属性。 控制器本身使用controllerAs设置为$ scope上的'window'对象; 这是指令定义：

function windowDirective() {
  return {
    transclude: true,
    template: template,
    restrict: 'E',
    controller: WindowCtrl,
    controllerAs: 'window',
    link: function($scope, $element, $attrs, $ctrl) {
      $scope.$watch('window.x', function(newValue, oldValue) {
        // access x here
      });
    }
  };
}

这是WindowCtrl

'use strict';
class WindowCtrl {
  move(x, y) {
    this.x = x;
    this.y = y;
  }
}

module.exports = WindowCtrl;

当我拖动一个子指令时move(x, y)正在调用move(x, y) - 它肯定被调用，并且this.x和this.y 肯定是在WindowCtrl上设置的。 另外，如果我在console.dir $scope然后激活move()几次，我可以在chrome中打开范围（因为它被懒惰地评估）并且看到$scope.window.x和$scope.window.y确实正在确定。

但是，我的$scope.$watch在最初检测到window.x未定义时从不实际触发。 不确定如何继续。 我确实搜索并尝试了我找到的所有解决方案，但它们似乎都没有起作用。

我正在使用Angular 1.3.16。

注意：对WindowCtrl.move()的访问只能在Angular的摘要周期内进行 - 见下文 - 但是使用$scope.$apply()解决了这个问题。 我不确定为什么会这样。 你能解释一下吗？ 以下是嵌套在上述指令中的指令。 它将调用onDrag的方法，在我的例子中指向window.move(x, y);

function windowHeaderDirective() {
  return {
    transclude: true,
    template: template,
    replace: true,
    require: `^${windowDirective.$name}`,
    scope: {
      enableClose: '=actionClose',
      draggable: '=',
      onDrag: '&'
    },
    bindToController: true,
    link: function($scope, $element, $attrs, $ctrl) {
      $scope.close = $ctrl.close.bind($ctrl);
      let moving = false;
      $element.on('mousemove', function(event) {
        if(!moving) return
        const { x, y } = event;
        $scope.header.onDrag({ x, y });
        // $scope.$apply here will fix this issue, but why? Isn't $element.on within angular's digest cycle??
      });
      $element.on('mousedown', function(event) {
        moving = true;
      });
      $element.on('mouseup', function(event) {
        moving = false
      });
    },
    controller: controller,
    controllerAs: 'header'
  };
}

Answer 1

在$ watch尝试使用这样的函数观察器：

$scope.$watch(function() {
  return $scope.window.x
 }, ...

Answer 2

自答案：

看来，由于我的更新，我自己回答了这个问题，所以;

$element.on似乎没有实际处于角度摘要周期 - 这对我来说相当令人惊讶，我认为它会是。 但是，这实际上意味着我的代码应该正常工作 - 它只是控制器上变量的变化不会立即显现出来。 解决这个问题的方法是在$element.on处理程序中使用ng-mousedown et al或$scope.$apply 。