如何查看元素的大小？

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 的范围限制为特定范围，以免引起不必要的观察者调用。