angular js - scope.apply funktioniert nicht wie erwartet

Ich benutze eckiges Material 1 und möchte sidennave ausblenden, wenn die Fenstergröße nicht "gt-sm" erfüllt. Unten ist der Controller-Code.angular js - scope.apply funktioniert nicht wie erwartet

.controller('mainpageController',mainpageAction); 

function mainpageAction($scope,$mdMedia,$window){ 
    //state variable for mainpage. 
    $scope.sideNavVisibility = $mdMedia('gt-sm'); 

    /* function definition for mainpage; bind this function using ng-click when user click on side menu */ 
    $scope.showSideNav = function(defaultDisplay){ 
     $scope.sideNavVisibility = true; 
    }; 
    angular.element($window).bind('resize', function(){ 
     console.log($mdMedia('gt-sm')); 
     $scope.$apply(function() { 
      $scope.sideNavVisibility = $mdMedia('gt-sm'); 
     }); 
    }); 
}

Unten ist die HTML-Vorlage, wo ich es verwende.

<body md-theme="mainpage" ng-controller="mainpageController"> 
<div layout="row" layout-fill="true"> 
<md-sidenav class="md-sidenav-left" md-is-locked-open="{{sideNavVisibility}}" flex="none">

In der Konsole bekomme ich den richtigen Wert. Wenn die Bildschirmseite größer als 960px ist, wird der Wert "true" oder "false" protokolliert. Aber die Änderung wird immer noch nicht angewendet.

Hier im Grunde möchte ich sidentenav zeigen, wenn die Bildschirmgröße mehr als 960px ist, d. H. "GT-SM" oder wenn nicht größer als "GT-SM" dann wenn Benutzer auf Seitenmenü-Symbol klicken.

Quelle

2016-10-16 virus

Wenn Sie einfach nur zeigen wollen/verstecken, dann sollten Sie 'ng-show' oder' ng-hide' – EvilZebra

Entfernen Sie die doppelten geschweiften Klammern {{ }} aus dem Ausdruck zum md-is-locked-open Attribut eingerichtet:

<body md-theme="mainpage" ng-controller="mainpageController"> 
    <div layout="row" layout-fill="true"> 
    <md-sidenav class="md-sidenav-left" 
       <!-- REMOVE double curly brackets 
       md-is-locked-open="{{sideNavVisibility}}" 
       --> 
       md-is-locked-open="sideNavVisibility"      
       flex="none">

Doppel geschweiften Klammern wandelt den Booleschen Wert false auf den String "false". In JavaScript ist die Zeichenfolge "false" truthy statt falsy. In der Tat ist jede Zeichenfolge mit einer Länge größer als Null truthy. Dies ist eine der Eigenheiten von JavaScript.

Weitere Informationen finden Sie MDN JavaScript Reference - falsy

Quelle

2016-10-16 18:17:31 georgeawg

Um ein Element basierend auf einer Bedingung in Angular anzuzeigen/auszublenden, können Sie einfach ng-show oder ng-hide verwenden.

<md-sidenav ng-show="sideNavVisibility" class="md-sidenav-left" flex="none">

Quelle

2016-10-16 15:20:09 EvilZebra

Dank verwenden .. aber ich nicht Seite Menü wollen Inhalte zum selben Zeitpunkt überlagern. – virus

In Ihren eigenen Worten "... im Grunde möchte ich sidentenav wenn ..." Sie müssen klarer mit Ihren Anforderungen sein und/oder mehr Code zur Verfügung stellen. – EvilZebra

In Ihrem Code sieht es so aus, als ob Sie Angular mit einem Attribut für einen anderen Code verwenden. Meine Vermutung ist, dass Sie Ihren Code erneut ausführen müssen, der das nav behandelt, wenn sich 'sideNavVisibility' ändert. – EvilZebra

angular js - scope.apply funktioniert nicht wie erwartet

Antwort

Verwandte Themen