Wie Ionic Bereich Schieberposition $ ionicPopup

Question

Ich habe Richtlinie Schriftgröße ändern auf Seite erinnern. Aber jedes Mal, wenn ich den Schieberegler für den Popup-Bereich öffne, haben die Standardpositionswerte einen Wert in meinem Controller. So speichern Sie den geänderten Wert für den Bereich? Dies ist meine Funktion in der Steuerung:

$scope.fontAdjust = function() { 

    var alertPopup = $ionicPopup.alert({ 
    title: 'Font adjustment', 
    template: '<text-size-slider min="10" max="18" unit="px" value="14" step="0"></text-size-slider>' 
    }) 

    } 

Answer 1

Was Controller hinzugefügt wird:

1. Haben Sie eine $scope.vm.fontSize Variable in der Steuerung und verwenden Sie es in der Vorlage wie diese

   template: '<text-size-slider min="10" max="18" unit="px" value="vm.fontSize" step="0"></text-size-slider>' 
   

   Sie können Lesen Sie Understanding Scopes, um zu wissen, warum ich vm.fontSize und nicht primitive fontSize verwendet habe.

2. Fügen Sie eine Uhr in den Controller ein, um über den geänderten Wert benachrichtigt zu werden. Hier kann der geänderte Wert irgendwo gespeichert werden, z.B. in localStorage.

   $scope.$watch('vm.fontSize', function (newValue, oldValue) { 
       console.log(newValue); 
       localStorage.fontSize = newValue; 
   }); 
   

und dann in Ihrer Richtlinie den folgenden Code verwenden:

1. value: '@' zu value: '=':

   return { 
       restrict: 'E', 
       template: '<div class="range"><i class="icon" ng-style="{ fontSize: min + unit }">A-</i><input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="value" /><i class="icon" ng-style="{ fontSize: max + unit }">A+</i></div>', 
       scope: { 
       min: '@', 
       max: '@', 
       unit: '@', 
       value: '=', 
       step: '@' 
       }, 
       link: function (scope, element, attr) { 
       scope.textSize = scope.value; // This is not required 
       scope.$watch('value', function (size) { 
        var x = document.getElementsByTagName("P"); 
        var i; 
        for (i = 0; i < x.length; i++) { 
        x[i].style.fontSize = size + scope.unit; 
        } 
       }); 
       } 
   } 
   

   Was in Richtlinie geändert wird. Um denselben Verweis im äußeren Bereich zu verwenden, müssen Sie dann im Anweisungsumfang einen lokalen Verweis erstellen. Read More.

2. In template Eigenschaft hinzugefügt ng-model="value" die value (von äußeren Umfang) zu binden, direkt an die ng-model und entfernt, um das Attribut als valueng-model Aktualisierungen automatisch und es ist nicht notwendig.
3. Uhr auf die value direkt hinzugefügt als auf textSize, die es unnötig macht.

Wenn die Steuerung geladen wird, können Sie localStorage.fontSize und weisen es $scope.vm.fontSize und speichern Sie es zurück in localStorage.fontSize, wenn ihr Wert geändert wird gelesen.