NG 쇼 지침

Question

내가 타이머와 함께 단일 페이지 응용 프로그램을 구축하고, 2 개 버튼 :

• 1 하나 (onBreak = false)를 초기 상태에 표시됩니다 및 핸들 25 분 타이머는
• 2 일 제 1 회 타이머가 이상 (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]); 
})(); 

및 기본적

(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 (...)), I는해야 true로 설정 onBreak ng-show 지시문을 사용하여 두 번째 버튼을 표시하십시오.

문제가 있습니까? 그렇지 않습니다. ng-inspector를 사용하면 onBreak가 true라는 것을 알 수 있지만 두 번째 버튼이 아닌 첫 번째 버튼을 계속 볼 수 있습니다.

기타 문제 : 다음 할

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

: 하자 내가 함수를 작성 말을 더 악화

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

나는 여전히 올바른 버튼 동작을하지 않으며, onBreak GET 타이머가 끝났을 때 대신 클릭 할 때 true로 설정하십시오.

도움말 제발 ... 너무 오래되었습니다. 붙어 있습니다.

Answer 1

컨트롤러에 구문이 있지만 HTML에서는 사용되지 않는 것 같습니다. html에서 값에 액세스하려면 속성을 참조해야합니다.

ng-controller="HomeCtrl as $ctrl" 

이제 이와 같은 변수에 액세스하십시오.

ng-hide="$ctrl.onBreak"