ng-show 指令不起作用 Angular（controllerAs 问题）

Question

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

第一个出现在初始状态 (onBreak=false)，并处理 25 分钟计时器
第一个计时器结束时出现第二个 (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 确实等于 true，但我一直看到第一个按钮而不是第二个按钮。

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

$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（controllerAs 问题）

ng-show directive not working Angular (controllerAs issue)

callback

angularjs

angularjs-directive

ng-show

angular-promise