如何观察元素的大小？

Question

我正在尝试观察指令元素的宽度（指令本身）。在下面的演示中，我将元素样式设置为100％，在现实世界的应用程序中，元素通过媒体查询调整大小。

这是我的方法： http://jsfiddle.net/fusio/5zgaj79b/

scope.$watch(
  function() { 
    return element.width()
  }, 
  function(val) { 
    console.log(val) 
  }, 
  true
);

.width()没有改变吗？

Answer 1

它不触发的原因是，对于要调用的第一个函数，必须触发摘要循环。怎么做？尝试将以下内容添加到您的小提琴中：

angular.module('HelloApp', ['components']).run(function($rootScope) {
    $(window).on("resize", function() {
        $rootScope.$apply();
    });
});

对于实际场景，您可能希望将$apply的范围限制为特定范围，以免引起不必要的观察者调用。