调整大小后更改属性？ AngularJS

Question

我使用 angular-ui carousel ，我的指令现在看起来像这样

<ui-carousel slides="value" 
             slides-to-show="calculateGamesCount"
             slides-to-scroll="calculateGamesCount"> 
      ... 
</ui-carousel>

指令范围：

 show: '=slidesToShow',
 scroll: '=slidesToScroll',

从父控制器我得到 "calculateGamesCount" ，但是在 window 调整轮播指令大小后 attrs 没有改变，它保持不变。

$scope.calculateGamesCount = Math.floor(( window.innerWidth - 90 ) / 232 );

// Get value after resize
angular.element($window).bind('resize',function(){
    $scope.$apply(function(){
        $scope.calculateGamesCount = Math.floor(( window.innerWidth - 90 ) / 232 ) ;
    });
});

我该如何解决？

Answer 1

好吧，您的情况有解决方法。您可以使用以下通用指令来监视 window 大小的变化。然后您可以在控制器中观察 windowWidth 变量，每次 window 指令内部宽度发生变化时都会设置该变量。在 watch 函数中，您首先使用 ng-if 删除视图中的 ui-carousel 组件，然后分配新计算的 calculateGamesCount 值，然后将 ng-if 设置为 true。通过这样做，每次 window 宽度发生变化时，您的指令都会重新呈现。

app.directive('resize', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        scope.getWindowDimensions = function () {
            return {
                'h': w.height(),
                'w': w.width()
            };
        };
        scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;

        }, true);

        w.bind('resize', function () {
            scope.$apply();
        });
    }
});

在控制器内部添加此代码：

$scope.$watch('windowWidth', function(n, o){
        $scope.showCarousel = false;
        $timeout(function(){
            $scope.calculateGamesCount = Math.floor(( window.innerWidth - 90 ) / 232 );
            $scope.toShow = angular.copy($scope.calculateGamesCount);
            console.log($scope.calculateGamesCount);
            $scope.showCarousel = true;
        });
});

您可以在 ui-carousel 标记指令的任何父元素上使用 resize 指令。工作 plunker 示例：https://plnkr.co/edit/ebi2b2z9o1IlbIMBcu8r?p=preview

调整大小后更改属性？ AngularJS

Change attribute after resize ? AngularJS

carousel

angularjs

angular-ui