Angularjs 调整大小后更改属性？安格拉斯

我使用，我的指令现在是这样的

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

从父控制器我得到“calculateGamesCount”，但在窗口调整转盘指令ATTR不变后，它保持不变

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

---

我怎么能修好它

嗯，你的情况有解决办法。您可以有以下监视窗口大小变化的通用指令。然后，您可以查看控制器中的

windowWidth

变量，该变量在每次windowWidth inside指令发生变化时都会进行设置。在watch函数中，首先使用

ng if

删除视图中的ui旋转木马组件，然后为

calculateGamesCount

分配新计算的值，然后将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;
        });
});

您可以在

ui carousel

标记指令的任何父元素上使用

resize

指令。

---

正在使用的plunker示例：

您是否使用引导程序，可以将其包装成X列？调整大小时，它也应该调整大小。否，DH根据carousel指令而不是cssi生成的carousel项目意味着您可以将，或者，如果放一些代码来检查它，看看会发生什么。我正在查看angular ui carousel的文档，正在等待实现响应。谢谢，它看起来很好，everythink工作得很完美，但是我的控制器无法观察“windowWidth”值。不，从这里的控制台.log（$scope.calculateGamesCount）我看到它只在启动时立即工作，在resizeNo后不工作。它工作得很好。在单独的窗口中打开plunker预览，calculateGamesCount的值将超过2。只需尝试调整窗口大小&对于每次调整大小，您都会在控制台上看到值。

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