从工厂传递param调用函数

时间:2015-08-06 12:18:24

标签: angularjs angularjs-directive angularjs-scope

HTML:

def test
    `mkdir c:\\opt\\CreateJSON\\#{params[:todo_text]}`
    `mkdir c:\\opt\\CreateJSON\\#{params[:ddl3]}`
    render 'test'
  end
def show
    render 'test'
end

控制器:

<div class="container">
<div>
    <div ng-controller="LogPhoneMainController" ng-init="init()">
        <div class="row">
            <div class="col-sm-3 col-md-3 col-lg-3">
                <h2>{{header}}</h2>
            </div>
            <div class="col-sm-offset-3 col-md-offset-3 col-lg-offset-3 col-sm-3 col-md-3 col-lg-3" >
                <div ng-repeat="options in stopwatches|limitTo:1">
                    <div bb-stopwatch options="options">
                        <div class="container">
                            <div class="stopWatch">
                                {{options.elapsedTime | stopwatchTime}}
                            </div>
                            <div class="stopWatch-btn-con">
                                <button class="toggle-btn" ng-click="startStopTimer()">
                                    {{startStop}}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-md-3 col-lg-3">
                <input id="inbound" type="radio" name="content" value="inbound">
                <input id="outbound" type="radio" name="content" value="outbound">
            </div>
        </div>
        <hr />           
        <div class="row">
            <div class="">
                <div ng-view>

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

    </div>
</div>
</div>
@Scripts.Render("~/bundles/stopwatch")

过滤

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

    var self = this;
    var togle = false;

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

$scope.startStop = "Start";

$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.startStopTimer = stopwatchService.startStopTimer;
        scope.startTimer = stopwatchService.startTimer; 
        scope.stopTimer = stopwatchService.stopTimer;
        scope.resetTimer = stopwatchService.resetTimer;

    }
};
}])

当我点击我的按钮时,错误抱怨它无法定义$ scope,可以理解,因为我不知道如何将我的参数传递给stopStartTimer函数,然后设置名为stopStart的范围变量。

如何以正确的方式通过我的代码传递此参数?

1 个答案:

答案 0 :(得分:0)

HTML

<div class="container">
<div>
    <div ng-controller="LogPhoneMainController" ng-init="init()">
        <div class="row">
            <div class="col-sm-3 col-md-3 col-lg-3">
                <h2>{{header}}</h2>
            </div>
            <div class="col-sm-offset-3 col-md-offset-3 col-lg-offset-3 col-sm-3 col-md-3 col-lg-3" >
                <div ng-repeat="options in stopwatches|limitTo:1">
                    <div bb-stopwatch options="options">
                        <div class="container">
                            <div class="stopWatch">
                                {{options.elapsedTime | stopwatchTime}}
                            </div>
                            <div class="stopWatch-btn-con">
                                <button class="toggle-btn" ng-click="startStopTimer(startStop)">
                                    {{startStop}}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-md-3 col-lg-3">
                <input id="inbound" type="radio" name="content" value="inbound">
                <input id="outbound" type="radio" name="content" value="outbound">
            </div>
        </div>
        <hr />           
        <div class="row">
            <div class="">
                <div ng-view>

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

    </div>
</div>

控制器代码:

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

        var self = this;
        var togle = false;

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

    $scope.startStop = StopwatchFactory.startStop;

    $scope.stopwatches = [{ log: [] }, { interval: 1000, log: [] }, { interval: 2000, log: [] }];

    }]);

指令代码

.directive('bbStopwatch', ['StopwatchFactory', function(StopwatchFactory){
return {
    restrict: 'EA',
    scope: {startStop='@'},
    link: function(scope, elem, attrs){   

        var stopwatchService = new StopwatchFactory(attrs.options);

        scope.startStopTimer = stopwatchService.startStopTimer;
        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);
    };


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

    return self;

};
}]);