angularjs 如何在屏幕调整大小时隐藏某些元素

Question

我是 angularjs 的新人。我进行了很多搜索以在 body resize 上隐藏一些 html 元素，但没有用。这是我的控制器代码。

var app = angular.module('studentPage',[]);

    app.controller ('studentController',function($scope, $window) {

    var appWindow = angular.element($window);

    appWindow.bind('resize', function () {
        if($window.innerWidth < 600){
            alert("hello");
            $scope.ohh = true;
        }
  });

});

我在这里使用 ng-show

<div id="sidebar-wrapper" ng-show="ohh">

Answer 1

如果您想使用 AngularJS 实现此目的，您需要使用 $scope.$apply() 重新启动 digest cycle。

appWindow.bind('resize', function () {
    if($window.innerWidth < 600){
        $scope.ohh = true;
        $scope.$apply();
    }

});

无论如何，我认为更简洁的方法是使用 CSS media queries:

@media only screen and (max-width: 599px) {
    #sidebar-wrapper {
        display: none;
    }
}

Answer 2

您必须使用 $apply() 函数手动触发摘要循环，因为您正在做的事情超出了 angular context.Try 下面的代码。

var app = angular.module('studentPage',[]);

app.controller ('studentController',function($scope, $window) {

var appWindow = angular.element($window);

appWindow.bind('resize', function () {
    if($window.innerWidth < 600){
        alert("hello");
        $scope.ohh = true;
        $scope.$apply()

    } });});

Answer 3

您必须通过调用 $scope.$apply().:-

来应用范围更改

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $window) {

  var appWindow = angular.element($window);
  $scope.ctrl = {};
  $scope.ctrl.ohh = false;
  appWindow.bind('resize', function() {
    console.log($window.innerWidth);
    if ($window.innerWidth < 600) {
      $scope.ctrl.ohh = true;
      $scope.$apply()
    }
  });
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
  <h1>THis is main content</h1><br>
    <div id="sidebar-wrapper" ng-show="ctrl.ohh">This is shown after window width is less than 600
    </div>
  </div>

angularjs 如何在屏幕调整大小时隐藏某些元素

How to hide some element on screen resize in angularjs

angularjs

ng-show

ng-hide