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

时间:2017-05-03 09:09:23

标签: javascript jquery angularjs

我使用sly carousel for angularjs应用程序,但它有一些问题。 其中一个是这种情况。

当轮播改变他的大小,或加载新数据时,它的工作与bug,所以,现在我有这个指令,我的目标是' 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());
          });
        }
      }
    };
  }
]);

1 个答案:

答案 0 :(得分:1)

我认为这应该有用......

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