Question

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

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

指令范围：

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

从父控制器我得到＆＃34; calculateGamesCount＆＃34; ，但窗口调整大小旋转木马指令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

有你的病情的解决方法。您可以使用以下通用指令来监视窗口大小的变化。然后，您可以在控制器中观察windowWidth变量，该变量在指令内每次窗口宽度发生变化时设置。在监视功能内部，您首先使用ng-if删除视图中的ui-carousel组件，然后分配新计算的calculateGamesCount＆amp;然后使ng-if为true。通过这样做，每次窗口宽度发生变化时，都会重新渲染指令。

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

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

调整大小后更改属性？ AngularJS

1 个答案: