AngularJS/jQuery: thay đổi văn bản trong span không kích hoạt thay đổi kích thước sự kiện

Question

Tôi gặp sự cố khi nhận sự kiện resize của jQuery để kích hoạt span, sau khi tôi đã thay đổi văn bản bên trong khoảng.

Tôi đang áp dụng xử lý sự kiện cho các yếu tố span sử dụng một chỉ thị AngularJS:

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(); 
     }; 
    }]); 

nhưng tôi không nhìn thấy ngọn lửa gọi lại khi văn bản bên trong span thay đổi. Nếu nó có liên quan: văn bản đang được thay đổi bằng cách sử dụng một biểu thức AngularJS được nhúng.

thực tế (đầy đủ) đoạn mã của tôi có thể được nhìn thấy trên jsFiddle tại địa chỉ: http://jsfiddle.net/KkctU/13/

Answer 1

Sự kiện thay đổi kích thước không có nghĩa là cho các yếu tố bên trong tài liệu như một khoảng. Nó chỉ được sử dụng trên cửa sổ.

Here is a plugin that might help you. Tôi đã không sử dụng nó, nhưng nó có vẻ như nó đi đúng hướng cho bạn.

Cuối cùng, có thể tốt hơn/dễ dàng hơn khi chỉ thiết lập đồng hồ trong chỉ thị của bạn trên bất kỳ thứ gì bị ràng buộc, sau đó kiểm tra xem chiều cao và chiều rộng có thay đổi khi văn bản thay đổi hay không. Cũng giống như ý tưởng:

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. 
      }   
     }); 
    } 
});