客户端宽度上的$watch不起作用

Question

在我的指令中，我有这个，它只在开始时起作用，以后无论何时调整大小，它都不会触发。

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

Answer 1

您的函数对我来说很合适，但需要注意的是，除非手动触发调整大小事件的摘要，否则它不会在调整大小时启动。

如果没有这一点，angular就不会意识到有什么事件应该引发摘要，所以没有发生。

尝试添加这个（记住注入$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来扩展菜单，对范围进行更改，在本例中，它是一个充当标志的布尔var。由于菜单的打开是通过作用域的更改来进行的，因此它调用了在所有$watch中迭代的$digest循环。

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

您可以在这个JSfiddle中查看完整的示例https://jsfiddle.net/owenbcal/zf17s0mL/希望我能帮上忙。

Answer 3

我了解观察这类值的方法是生成一个函数，一旦值发生变化就会触发该函数，然后我观察该函数：

服务中：

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

在控制器中：

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