NG-ショーディレクティブ（controllerAs号）

Question

私はタイマーと2つのボタンで単一ページのアプリケーションを構築しています：

• 第一1は（onBreak = false）を初期状態に現れ、そしてハンドル25分タイマー
• 第二1は、ここで第一タイマーが（onBreak =真）以上で、かつ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]); 
})(); 

とは、基本的に

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

をapp.js（promise.then（...））、私はそのはず、trueに設定onBreak ng-showディレクティブを使用して2番目のボタンを表示します。

問題がありますか？ それはありません。 ng-inspectorを使用すると、onBreakはtrueであることがわかりますが、最初のボタンが表示され、2番目のボタンは表示されません。

他ISSUE： レッツは、私は関数を作成言う：

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

アンその後、実行します。

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

私はまだ正しいボタンの動作を得ることはありません、とさらに悪化、onBreak GETタイマーが終了したときではなく、クリック時にtrueに設定されます。

ヘルプお願いします...あまりにも長すぎました。私はそれに固執しています

Answer 1

コントローラーではcontrollerAsの構文を使用していますが、HTMLでは構文が使用されていないようです。 htmlで値にアクセスするためにプロパティを参照する必要があります。

ng-controller="HomeCtrl as $ctrl" 

このような変数にアクセスします。

ng-hide="$ctrl.onBreak"