AngularJS / jQuery：更改span中的文本不会触发resize事件

I'm having trouble getting jQuery's resize event to fire on a span, after I've changed the text inside the span.

在我更改了跨度内的文本后,我无法在跨度上触发jQuery的resize事件。

I'm applying the event handlers to the span element using an AngularJS directive:

我正在使用AngularJS指令将事件处理程序应用于span元素:

angular.module("test.directives", [])
    .directive("trackSize", ["$parse", function($parse) {
        return function(scope, element, attrs) {
            function callback() {
                var size = { w: element.width(), h: element.height() };
                scope[attrs.trackSize].call(scope, size);
            }
            element.on("resize", function() {
                console.log("resize");
                scope.$apply(callback);
            });
            callback();
        };
    }]);

but I'm not seeing the callback fire when the text inside the span changes. If it's relevant: the text is being changed using an embedded AngularJS expression.

但是当跨度内的文本发生变化时,我没有看到回调。如果相关:使用嵌入的AngularJS表达式更改文本。

My actual (full) code snippet can be seen on the jsFiddle at: http://jsfiddle.net/KkctU/13/

我的实际(完整)代码片段可以在jsFiddle上看到:http://jsfiddle.net/KkctU/13/

1 个解决方案

#1

The resize event isn't meant for elements inside the document like a span. It's made for use on the window only.

resize事件不适用于文档中的元素,如span。它只适用于窗户。

Here is a plugin that might help you. I've not used it, but it seems like it's along the right track for you.

这是一个可能对您有帮助的插件。我没有用它,但它似乎正好适合你。

In the end, though, it might be better/easier to just set up a watch in your directive on whatever is bound to it, then check to see if the height and width have changed when the text changes. Just as an idea:

但最后,可能更好/更容易在指令中设置监视任何绑定它的指针,然后检查文本更改时高度和宽度是否已更改。就像一个想法:

app.directive('trackSize', function () {
   return function(scope, element, attrs) {
       var w = element.width(),
           h = element.height();
       scope.$watch(attrs.trackSize, function(v) {
           element.text(v);
           var w2 = element.width(),
               h2 = element.height();
           if(w != w2 || h != h2) {
              //TODO: do something here, the size has changed.
           }           
       });
   }
});

#1