Scope und eckiges Material

Question

Entschuldigung für die lange Frage. Ich habe eine md-Unterseite mit eckigem Material erstellt. https://material.angularjs.org/latest/demo/bottomSheet. Diese Schaltfläche löst die untere Seite aus.

HTML-Datei 1:

<md-button ng-click="openBottomSheet()"></md-button> 

Dies ist die Funktion i

JS auslösen - Controller 1

$scope.openBottomSheet = function() { 

    $mdBottomSheet.show({ 
     templateUrl: 'components/map/services.html', 
     disableBackdrop: true, 
     controller: 'serviceController', 
     clickOutsideToClose: true, 
    }); 
}; 

In meinem unteren Blatt habe ich erstellt Schalter-Tasten https://material.angularjs.org/latest/demo/switch, dass Trigger eine Funktion. Ich habe eine andere Funktion, die das untere Blatt schließt.

<md-bottom-sheet class="md-list servicebottomsheet" layout-align="center center" class="mapoptionwrap" ng-cloak> 
<div class="tester"> 
    <div layout="row" layout-align="end center"> 
     <button ng-click="closeBottomSheet()"> 
      <i class="material-icons closeservice">clear</i> 
     </button> 
    </div> 

    <div layout="row" layout-align="space-between center" ng-repeat="option in mapoptions" class="scrolltest"> 

     <div layout="row" layout-align="start center"> 


      <p class="servicetexts">{{option.title | translate}}</p> 
     </div> 
     <md-switch class="md-primary" ng-model="testing" aria-label="Switch 1" ng-click="switchFilter(option)"> 
     </md-switch> 


    </div> 
</div> 

Dies sind die Funktionen, die

Controller nr 2

app.controller("serviceController", ['$scope', 'mapFilters', '$mdBottomSheet', function ($scope, mapFilters, $mdBottomSheet) { 
$scope.mapoptions = mapFilters.getMapFilters(); 
$scope.switchFilter = function (mapoption) { 
    mapFilters.filter[mapoption.type] = !mapFilters.filter[mapoption.type]; 
    console.log(mapFilters.filter); 
} 

$scope.closeBottomSheet = function() { 
    $mdBottomSheet.hide({ 
     preserveScope: true, 
    }); 

} 
}]) 

ausgelöst werden, das Betätigen der Schalter I der switchfilter Funktion auslösen, die eine Variable von falsch auf wahr setzt . Es funktioniert genau so, wie es sollte. Wenn ich jedoch die untere Seite schließe und sie dann wieder öffne, scheinen die Schalter geleert worden zu sein, alle sind wieder auf falsch gesetzt, obwohl der Booleen, den ich mit dem Schalter geändert habe, immer noch auf wahr gesetzt ist. Warum ist das? Hat es etwas mit meinem Umfang zu tun, da ich verschiedene Controller verwende?

Answer 1

Ja, tut es. Wenn Sie in Ihrer Konfiguration keinen Bereich angeben, wird bei jedem Öffnen des unteren Bereichs ein neuer Bereich erstellt und beim Schließen des Bereichs gelöscht.

Sie könnten Ihre bottomsheet wie folgt erstellen:

$scope.openBottomSheet = function() { 
    $mdBottomSheet.show({ 
     templateUrl: 'components/map/services.html', 
     disableBackdrop: true, 
     controller: 'serviceController', 
     clickOutsideToClose: true, 
     scope: $scope, 
     preserveScope: true 
    }); 
}; 

dies tun Sie in Ihrem geordneten Bereich bestehen werden (Sie jeden Umfang passieren könnte), und mit preserveScope: true wird es nicht den Umfang zerstören, wenn Sie in der Nähe die Unterseite.