Question

在我的指令中，我有这个并且它只在开始时起作用，每当我稍后调整它时它永远不会发射。

    scope.$watch ->
        cw: element[0].clientWidth
    ,(newValue, oldValue)->
        if newValue.cw isnt oldValue.cw
            console.log "changed"
    ,true

Answer 1

您的功能对我来说很合适，但重要的是要注意除非您在调整大小事件上手动触发摘要，否则不会触发调整大小。

如果没有这个，角度没有意识到应该触发摘要的事件，所以没有发生。

尝试添加此项（请记住注入$window）：

angular.element($window).bind('resize', ()->
  scope.$apply();
)

Answer 2

就像Jason Goemaat所说，因为手表仅在$digest周期内进行检查根据元素调整大小的方式，这个例子可能对您有所帮助。这是一个菜单，当按下箭头时会自动展开它。

<div class="menu" ng-class="{'expanded' : main.expanded}">
    <div class="menu-handler" ng-click="main.expanded = !main.expanded">
    </div>
</div>

通过ng-click扩展菜单，对范围进行更改，在这种情况下，它是一个布尔值var，用作标志。由于菜单的打开是通过范围的变化进行的，因此它会调用$digest循环遍历所有$watch。

scope.$watch(function() {
      return element[0].clientWidth;
}, function(oldValue, newValue) {
      console.log(oldValue, newValue);
});

您可以在此JSfiddle中查看完整示例 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function 希望我有所帮助。

Answer 3

我知道观察这种值的方式是创建一个值，一旦值发生变化就会触发，然后我会看到这个函数：

在服务中：

this.getDataOut = function () {
    return self.dataOut;
};

在控制器中：

$scope.$watch(dataService.getDataOut, function() {
    $scope.dataOut = dataService.dataOut; 
});

$ watch on clientWidth无效

3 个答案: