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

Question

我使用 sly carousel 来实现 angularjs 应用程序，但它有一些问题。 本案就是其中之一。

当轮播更改其大小或加载新数据时，它会出现错误，所以，现在我有了这个指令，我的目标是“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');
    }
  }
);