Question

使用预先构建的“Angular Timer”指令here（向下滚动到进度条示例），我正在尝试构建一个带有“开始”，“停止”和“恢复”按钮的进度条一体机。他们网站上的例子由两个按钮组成，我想将它们合并。

一个解决方案可能是使用innerHTML来获取当前状态（“开始”或“停止”）和控制器中的if条件。但是我希望按钮是一个仅图标按钮切换播放暂停图标。可以使用简单计时器实现的示例here

这是我的HTML

<button class="button button-icon icon" ng-class="{'icon ion-play': !play, 'icon ion-pause': play}" ng-click="stopResumeTimer(this)"></button>
<timer interval="1000" autostart="false"><div class="progress"> <div class="bar" style="width: {{seconds}}%;"></div> </div></timer>

controller.js代码带有if条件

$scope.stopResumeTimer = function(btn) {
    if (not yet started) {
        $scope.startTimer();
    }
    else if (already started) {
        $scope.stopTimer();
    }
    else {
        $scope.resumeTimer();
    }
}

我对此一再失败感到气馁，任何帮助都会很棒！感谢

Answer 1

在设置ng-click功能的控制器中，您可以设置标志以确定单击功能是应该启动，停止还是恢复。这些标志还可以将按钮的文本设置为＆＃34;开始＆＃34;，＆＃34;停止＆＃34;或＆＃34;恢复＆＃34;。

JS：

(function(angular) {

  function controller($scope) {

    var isStart = false;
    var isStop = false;

    $scope.timerBtnText = "Start";

    $scope.timer = function() {
      if (isStart) {
        $scope.startTimer();
        isStart = false;
        isStop = true;
        $scope.timerBtnText = "Stop";
        return;
      } 

      if (isStop) {
        $scope.stopTimer();
        isStop = false;
        $scope.timerBtnText = "Resume";
      } else {
        $scope.resumeTimer();
        isStop = true;
        $scope.timerBtnText = "Stop";
      }
    };
  }

  angular.module("app", []).controller("controller", ["$scope", controller]);

})(angular);

HTML：

<button ng-click="timer()" ng-bind="timerText"></butotn>

这是一个有效的概念证明：http://plnkr.co/edit/NlQFPysVH1M2EyjogQQv

Answer 2

这就是我解决它的方法（Plunker）

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.operation = 'start';
  $scope.startOrStop = function(){
    document.getElementById('first')[$scope.operation]();
    $scope.operation = ($scope.operation === 'start' || $scope.operation === 'resume') ? 'stop' : 'resume';
  }
});

声明如下：

<button ng-click="startOrStop()" ng-class="{start:operation==='start', stop:operation==='stop', resume:operation==='resume'}"></button>
<timer id="first" interval="1000" autostart="false"><div class="progress"><div class="progress-bar" role="progressbar" style="width: {{seconds}}%;"></div></div></timer>

的CSS：

.start::before{
  content:"Start";
}
.stop::before{
  content:"Stop";
}
.resume::before{
  content:"Resume";
}

使用角度计时器在一个按钮中启动/停止/恢复全部

2 个答案: