Javascript AngularJS ngclick切换函数调用

尝试切换具有启动和停止功能的按钮

这是控制器

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;

};


}]);

这是我的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>

住在控制器里，下面是我的工厂

 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>

{{startStop}}

---

但是我没有定义范围（编辑：由于函数所在的位置，我没有定义startStop）

如果一切正常，您只想显示一个按钮，请尝试以下操作：

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

{{正在运行？'stop'：'start'}

如果一切正常，您只想显示一个按钮，请尝试以下操作：

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

{{正在运行？'stop'：'start'}

{{btn.value}

在函数调用中，切换toggleBtn（$scope.toggleBtn=！$scope.toggleBtn），以便在参数为true时执行startTimer（）或false时执行stopTimer（）

还是简单一点

您可以使用ng show/ng hide或ng（如果使用类似的变量切换按钮）

<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应该为true。

{{btn.value}

在函数调用中，切换toggleBtn（$scope.toggleBtn=！$scope.toggleBtn），以便在参数为true时执行startTimer（）或false时执行stopTimer（）

还是简单一点

您可以使用ng show/ng hide或ng（如果使用类似的变量切换按钮）

<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应为true。

在控制器和 使用控制器设置按钮文本

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

{{startStop}

在控制器中，仅执行一项功能

startStopTimer

---

并根据

startStop

的值切换按钮中的文本。

在控制器和 使用控制器设置按钮文本

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

{{startStop}

在控制器中，仅执行一项功能

startStopTimer

---

并根据

startStop

的值切换按钮中的文本。

它开始但不停止它开始但不停止对不起，您能解释一下控制器端的情况吗？对不起，您能解释一下控制器端的情况吗？而不是范围。startStop=false；使用$scope.startStop=false；您需要将

$scope

服务注入您的

控制器
应用程序控制器（“MyController”、['$scope'，function（$scope）{}]）范围在我的工厂中不存在，我需要将$Scope.startStop变量传递到我的工厂，而不是Scope.startStop=false；使用$scope.startStop=false；您需要将
$scope
服务注入您的
控制器
应用程序控制器（“MyController”、['$scope'，function（$scope）{}]）范围在我的工厂中不存在，我需要将$Scope.startStop变量传递到我的工厂