AngularJS根据页面内部宽度改变主体宽度

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

如果我会做宽度：100％;滚动条将永远不会显示，所以我正在寻找一个简单的解决方案来对页面宽度进行采样，并在其更改时将其设置为主体。

我有两个问题：

我不能使它发挥作用。
手表只在应用程序加载时触发，而不是每次窗口宽度发生变化时触发。

这是我使用的代码：

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

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

来源

2015-04-23 Liad Livnat

侧的评论 - 考虑使用与 – ajmajmajma

有你的resize事件的油门/防抖动在CSS中设置'overflow'属性？ – charlietfl

@charlietfl是的，我做了，但我需要设置一个固定的宽度，目前的宽度是100％，所以滚动从未播种 –

你应该用一个指令就是这样，改变你的<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元素都将具有窗口innerWidth。我没有测试它！

来源

2015-04-23 12:54:37

谢谢，但我不希望它是100％，我可以在生成时将它设置为100％，并且调整大小不会改变任何因素，因为它将始终将其设置为100％我希望能够更改它的宽度PX，所以滚动将显示 –

与该指令，你可以做你想做的一切。它应该有多宽？ –

应该自动调整到屏幕宽度，并且每当somone改变它时，它应该自动将身体设置为该尺寸。 –

你可以这样做：

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

来源

2015-04-23 12:53:51

由于某种原因身体没有获得宽度属性，任何想法为什么？ –

您需要听取窗口的resize事件。您无法观看DOM属性，因为其更改不会启动Angular摘要。更新一个$rootScope属性（但可以easilly进行调整更新别的）一个解决方案是：

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/

来源

2015-04-23 13:06:32

如何将新大小设置为页面主体？ –

你试过类似于'$（'body'）.css（“width”，window.innerWidth）;''apply'正文吗？ –

AngularJS根据页面内部宽度改变主体宽度

回答

相关问题