Je suis nouveau dans angularjs. J'ai beaucoup cherché pour cacher un élément html sur le redimensionnement du corps mais cela n'a pas fonctionné. voici mon code de contrôleur.

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

});

et ici où j'utilise ng-show

<div id="sidebar-wrapper" ng-show="ohh">
1
Muhammad Abdullah 3 août 2017 à 16:32

2 réponses

Vous devez déclencher manuellement le cycle de résumé en utilisant la fonction $ apply (), car ce que vous faites est hors de contexte angulaire.Essayez le code ci-dessous.

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()

    } });});
0
talentedandrew 3 août 2017 à 13:37

Vous devez appliquer les modifications de portée en appelant $ 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>
0
Gaurav Srivastava 3 août 2017 à 13:39