0

Ich baue eine Einzelseite-App mit einem Timer und 2 Tasten:ng-show-Richtlinie nicht Angular (controllerAs Ausgabe) arbeitet

  • 1. zeigt man auf Anfangszustand nach oben (onBreak = false) und Griffen ein 25min-Timer
  • 2. zeigt man, wenn der erste Timer über (onBreak = true) ist, und behandelt eine 5min-Timer

Hier ist der HTML:

<h1>{{ home.time | formattime }}</h1> 
    <button type="button" class="btn btn-primary" ng-hide="onBreak" 
      ng-click="home.workTimer()" ng-bind="home.startOrResetWork"> 
    </button> 
    <button type="button" class="btn btn-primary" ng-show="onBreak" 
      ng-click="home.breakTimer()" ng-bind="home.startOrResetBreak"> 
    </button> 

Der Controller:

(function() { 
    function HomeCtrl($interval) { 
    var $ctrl = this; 

    var promise; 

    $ctrl.time = 1500; 
    $ctrl.startOrResetWork = "START WORK"; 
    $ctrl.startOrResetBreak = "START BREAK"; 

    $ctrl.onBreak = false; 

    $ctrl.stopTimer = function() { 
     $interval.cancel(promise); 
    }; 

    $ctrl.startTimer = function() { 
     promise = $interval(function() {$ctrl.time--;}, 1000, [$ctrl.time]); 
    }; 

    $ctrl.workTimer = function() { 
     ($ctrl.startOrResetWork === "START WORK") ? $ctrl.startOrResetWork = "RESET" : $ctrl.startOrResetWork = "START WORK"; 
     if ($ctrl.startOrResetWork === "START WORK") { 
     $ctrl.stopTimer(); 
     $ctrl.time = 1500; 
     } else if ($ctrl.startOrResetWork === "RESET") { 
     $ctrl.startTimer(); 
     promise.then(function() { 
         $scope.onBreak = true; 
        }); 
     } 
    }; 

    $ctrl.breakTimer = function() {}; 

    } 

    angular 
    .module('pomodoroManager') 
    .controller('HomeCtrl', ['$interval', HomeCtrl]); 
})(); 

Und app.js

(function() { 

    function config($locationProvider, $stateProvider) { 
    $locationProvider 
     .html5Mode({ 
     enabled: true, 
     requireBase: false 
     }); 

    $stateProvider 
     .state('home', { 
     url: '/', 
     controller: 'HomeCtrl as home', 
     templateUrl: '/templates/home.html' 
    }); 
    } 

    angular 
    .module('pomodoroManager', ['ui.router', 'ui.bootstrap', 'firebase']) 
    .config(config); 
})(); 

Grundsätzlich, sobald der erste Countdowns (promise.then (...)) ist, setze ich auf true onBreak, die sollte Zeigen Sie die zweite Schaltfläche mit der ng-show-Direktive an.

DAS PROBLEM? Es tut es nicht. Mit ng-inspector sehe ich, dass onBreak gleich true ist, aber ich sehe immer die erste und nicht die zweite Taste.

andere Frage: Lassen Sie sagen, ich eine Funktion:

$ctrl.toggleOnBreak = function() { 
    $ctrl.onBreak = true; 
}; 

Ein dann tun:

promise.then($ctrl.toggleOnBreak()); 

ich immer noch nicht die richtige Taste Verhalten bekommen, und noch schlimmer, onBreak get true on click, statt wenn der timer vorbei ist ...

Hilfe bitte ... es war zu lange Ich bin fest auf dem

stecken
+0

onBreak ist ein Feld von $ ctrl. Aber der HTML-Code verwendet 'onBreak' und erwartet daher, dass sich das Feld im Bereich $ befindet. –

+0

In Ordnung. Ich bin relativ neu in Angular, und ich bin mir nicht sicher, wie man $ scope verwendet; Wenn ich es in der Controller-Funktion übergebe, erhalte ich einen TypeError: $ interval ist keine Funktion ... –

+0

Bearbeiten Sie die Frage so, dass sie den HTML-Code enthält, in dem Sie den Controller instanziieren. Es ist für die Leser verwirrend, '$ ctrl' im JS und 'home' im HTML zu verwenden. – georgeawg

Antwort

0

Es scheint, als ob Sie controllerAs Syntax in der Steuerung, aber nicht in der HTML `verwenden. In Ihrem HTML-Code müssen Sie auf eine Eigenschaft verweisen, um auf die Werte zugreifen zu können.

ng-controller="HomeCtrl as $ctrl" 

Jetzt Zugriff auf die Variable wie folgt.

ng-hide="$ctrl.onBreak" 
+0

Vielen Dank, es hat funktioniert! –

Verwandte Themen