AngularJS ngclick Переключатель функции вызова

Question

Пытается переключить кнопку с функциями запуска и останова.

Heres контроллер

App.controller('LogPhoneMainController', 
function LogPhoneMainController($scope) { 

var self = this; 

$scope.header = "Log a phone call"; 

$scope.stopwatches = [{ log: [] }, { interval: 1000, log: [] }, { interval: 2000, log: [] }]; 
}); 
App.filter('stopwatchTime', function() { 
return function (input) { 
    if(input){ 

     var elapsed = input.getTime(); 
     var hours = parseInt(elapsed/3600000,10); 
     elapsed %= 3600000; 
     var mins = parseInt(elapsed/60000,10); 
     elapsed %= 60000; 
     var secs = parseInt(elapsed/1000,10); 
     var ms = elapsed % 1000; 

     return hours + ':' + mins + ':' + secs + ':' + ms; 
    } 
}; 
}) 
.directive('bbStopwatch', ['StopwatchFactory', function(StopwatchFactory){ 
return { 
    restrict: 'EA', 
    scope: true, 
    link: function(scope, elem, attrs){ 

     var stopwatchService = new StopwatchFactory(scope[attrs.options]); 

     scope.startTimer = stopwatchService.startTimer; 
     scope.stopTimer = stopwatchService.stopTimer; 
     scope.resetTimer = stopwatchService.resetTimer; 

    } 
}; 
}]) 
.factory('StopwatchFactory', ['$interval', function($interval){ 

return function(options){ 

    var startTime = 0, 
     currentTime = null, 
     offset = 0, 
     interval = null, 
     self = this; 

    if(!options.interval){ 
     options.interval = 100; 
    } 

    options.elapsedTime = new Date(0); 

    self.running = false; 

    function pushToLog(lap){ 
     if(options.log !== undefined){ 
      options.log.push(lap); 
     } 
    } 

    self.updateTime = function(){ 
     currentTime = new Date().getTime(); 
     var timeElapsed = offset + (currentTime - startTime); 
     options.elapsedTime.setTime(timeElapsed); 
    }; 

    self.startTimer = function(){ 
     if(self.running === false){ 
      startTime = new Date().getTime(); 
      interval = $interval(self.updateTime,options.interval); 
      self.running = true; 
     } 
    }; 

    self.stopTimer = function(){ 
     if(self.running === false) { 
      return; 
     } 
     self.updateTime(); 
     offset = offset + currentTime - startTime; 
     pushToLog(currentTime - startTime); 
     $interval.cancel(interval); 
     self.running = false; 
    }; 

    self.resetTimer = function(){ 
     startTime = new Date().getTime(); 
     options.elapsedTime.setTime(0); 
     timeElapsed = offset = 0; 
    }; 

    self.cancelTimer = function(){ 
     $interval.cancel(interval); 
    }; 

    return self; 

}; 


}]); 

Heres мой HTML.

<div class="container"> 
<div class="row"> 
    <div ng-controller="LogPhoneMainController" ng-init="init()"> 
     <h2>{{header}}</h2> 
     <div ng-repeat="options in stopwatches|limitTo:1"> 
      <div bb-stopwatch options="options"> 
       <div class="container"> 
        <div class="stopWatch numbers"> 
         {{options.elapsedTime | stopwatchTime}} 
        </div> 

        <button class="btn" ng-click="startTimer()">start</button> 
        <button class="btn" ng-click="stopTimer()">stop</button> 
       </div> 
      </div> 
     </div> 
     <div ng-view> 

     </div> 
    </div> 
</div> 
</div> 

Я хочу только одну BTN и ngclick нужно переключать, какая функция вызывается и отображать iether запуска или остановки соответственно.

UPDATE:

я попытался

$scope.startStop = ""; 

жизни в контроллере и ниже в моей фабрике

self.startStopTimer = function (startStop) { 
     if (startStop === "Start") { 
      startTimer(); 
      $scope.startStop = "Stop"; 
     } else { 
      stopTimer(); 
      $scope.startStop = "Start"; 
     } 
    }; 

я поставить этот код в мой контроллер, а кнопка HTML выглядит следующим образом

<button class="btn" ng-click="startStopTimer()"> 
         {{startStop}} 
</button> 

но я получить охват не определен (редактирование: я получаю стартстопный неопределенными из-за того, где функция живет)

Answer 1

реализовать логику переключения в контроллере, а установить текст кнопки с контроллером.

<button class="btn" ng-click="startStopTimer()">{{startStop}}</button> 

в контроллере осуществлять только одну функцию startStopTimer и, основываясь на значении startStop переключения текста в кнопке.

Answer 2

Если все работает нормально, и вы просто хотите, чтобы показать одну кнопку, попробуйте следующее:

<button class="btn" ng-click="running?stopTimer():startTimer()">{{running?'stop':'start'}}</button> 

Answer 3

<button class="btn" ng-click="startTimer(toggleBtn)">{{btn.value}}</button> 

и внутри вызова функции переключения toggleBtn ($ scope.toggleBtn! = $ scope.toggleBtn), поэтому если параметр верно StartTimer() или если ложные StopTimer() будут выполнены

или простой один

Вы можете использовать либо нг-шоу/нг скрыть или нг-если тумблер кнопки с переменным как

<button class="btn" ng-click="toggleBtn = !toggleBtn ; startTimer()" ng-if="toggleBtn">start</button> 
<button class="btn" ng-click="toggleBtn = !toggleBtn ; stopTimer()" ng-if="!toggleBtn">stop</button> 

$ scope.toggleBtm должны быть правда, когда и хочет кнопку запуска.