Question

我正在构建一个带有计时器和2个按钮的单页应用程序：

第一个显示初始状态（onBreak = false），并处理25min-timer
第二个显示第一个计时器结束时（onBreak = true），并处理一个5分钟计时器

这是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>

控制器：

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

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

基本上，一旦第一次倒计时结束（promise.then（...）），我将onBreak设置为true，这应该使用ng-show指令显示第二个按钮。

问题？它不是。使用ng-inspector，我看到onBreak确实如此，但我一直看到第一个按钮，而不是第二个按钮。

其他问题：假设我创建了一个函数：

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

然后做：

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

我仍然没有得到正确的按钮行为，更糟糕的是，onBreak在点击时设置为true，而不是在计时器结束时......

请帮助......已经太长了我被困在那个

Answer 1

您似乎在控制器中使用controllerAs语法，但在HTML中没有。在你的html中需要引用一个属性来访问这些值。

ng-controller="HomeCtrl as $ctrl"

现在可以像这样访问变量。

ng-hide="$ctrl.onBreak"

ng-show指令不工作Angular（控制器问题）

1 个答案: