检测angularjs指令中的元素宽度变化

Question

我对 angularjs 应用程序使用狡猾的轮播，但它有一些问题。 其中一个就是这种情况。

当 carousel 改变他的大小，或者加载新数据时，它的工作有 bug，所以，现在我有了这个指令，我的目标是 'cont' 。

我需要检测，每次如果 cont 改变他的宽度然后重新加载狡猾的轮播。 （窗口调整大小效果很好）

BET5.directive('slyHorizontalRepeat', [
  '$timeout',
  function ($timeout) {
    return {
      restrict: 'A',
      link: function (scope, el, attrs) {

        if (scope.$last === true) {
          $timeout(function () {
            var cont = $('#frame')
            var frame = $(el[0]).parent().parent();
            var wrap = $(el[0]).parent().parent().parent();
            defaultOptions.horizontal = 1;
            var defaultControls = {
                scrollBar: wrap.find('.scrollbar') || null,
                pagesBar: wrap.find('.pages') || null,
                forward: wrap.find('.forward') || null,
                backward: wrap.find('.backward') || null,
                prev: wrap.find('.prev') || null,
                next: wrap.find('.next') || null,
                prevPage: wrap.find('.prevPage') || null,
                nextPage: wrap.find('.nextPage') || null
              };

            // Merge parts into options object for sly argument
            var options = $.extend({}, defaultOptions, defaultControls, scope.$eval(attrs.slyOptions));
            var callback = scope.$eval(attrs.slyCallback) || function (cb) {
            };

            scope.$watch(cont, function (newTime) {
              // do something
            });

            $(window).on('resize', function () {
              frame.sly('reload');
              console.log('resize');
            });

            // Call Sly on frame
            frame.sly(options, callback());
          });
        }
      }
    };
  }
]);

Answer 1

我认为这应该可行...

scope.$watch(
  function() {return cont.width()},
  function(newValue, oldValue) {
    if ( newValue !== oldValue ) {
      frame.sly('reload');
    }
  }
);