Question

我想让我的页面可滚动。

因此我需要在身体顶部添加宽度元素。

如果我愿意做宽度：100％;滚动器永远不会显示，所以我正在寻找一个简单的解决方案来采样到页面宽度并在它改变时将其设置为正文。

我有两个问题：

我无法使其发挥作用。
手表仅在加载应用时触发，而不是每次窗口宽度发生变化时触发。

这是我使用的代码：

   $scope.$watch(function(){
            return $window.innerWidth;
        }, function(value) {
            $scope.cols = value;
            var width = value +'px !important';

            $('body').css("width", width);
        });

Answer 1

您可以执行以下操作：

var w = angular.element($window);
w.bind('resize', function () {
         // set dimensions here with w.width() and w.height()
         $('body').css("width", w.width()); // in your case
    });

Answer 2

您应该使用这样的指令，将<body>更改为<body resize-body>并将此指令添加到您的应用中。

app.directive('resizeBody', ['$window', function($window) {
    return {
        link: function(scope, elem, attrs) {
            scope.onResize = function() {
                $(elem).width($window.innerWidth);
            }
            scope.onResize();

            angular.element($window).bind('resize', function() {
                scope.onResize();
            })
        }
    }
}])

现在，每次调整窗口大小时，body元素都将具有window innerWidth。我没有测试过它！

Answer 3

您必须收听窗口的resize事件。您无法观看DOM属性，因为对其的更改不会启动Angular摘要。更新$rootScope属性（但可以轻松调整以更新其他任何内容）的解决方案是：

app.run(['$window', '$rootScope', function($window, $rootScope) {
    $rootScope.windowWidth = window.innerWidth;
    window.addEventListener('resize', function() {
        $rootScope.$apply(function() {
            $rootScope.windowWidth = window.innerWidth;
        });
    });
}]);

看到这个小提琴：http://jsfiddle.net/e9hgao61/

AngularJS根据页面innerWidth更改主体宽度

3 个答案: