如何在工厂移动控制器代码



我在控制器中有一些代码,但是代码可重复使用..所以我想在工厂中移动它,然后每次需要工厂...我是无法将此代码移至工厂。如果我将其移动,则无济于事。在这里,我的控制器中有代码,我想在工厂搬迁:

var app = angular.module("clock.app");
  app.controller('timer',['$scope','$interval','$timeout','timerFactory',
  function($scope, $interval,$timeout,timerFactory){
    var framework7App = new Framework7();
    var $$ = Dom7;
    $scope.timeList = [
      {"hour":0, "minutes":1, "seconds": 6},
      {"hour":0, "minutes":3, "seconds": 180},
      {"hour":0, "minutes":5, "seconds": 300}];
      var today = new Date();
      var arr,hour, minutes, seconds,convertedSec;
      var getStoredList = JSON.parse(localStorage.getItem("timeListDetails"));
      if(getStoredList !=null){
        if(getStoredList.length != 0){
            $scope.timeList = getStoredList;
        }else{
           localStorage.setItem("timeListDetails", JSON.stringify($scope.timeList));
        }
      }else{
          getStoredList = $scope.timeList;
      }
      $scope.timerWithInterval = 0;

      $scope.startTimerWithInterval = function() {
        $scope.timerWithInterval = 0;
        if($scope.myInterval){
          $interval.cancel($scope.myInterval);
        }
        $scope.onInterval = function(){
          $scope.timerWithInterval++;
        }
        $scope.myInterval = $interval($scope.onInterval,1000);
      };
      $scope.resetTimerWithInterval = function(){
        $scope.timerWithInterval = 0;
        $interval.cancel($scope.myInterval);
      }
      $scope.timeCounterInSeconds= function(seconds) {
        $scope.startTimerWithInterval();
        $timeout(function () {
          $scope.timeCounter(seconds)
        }, 1000);
      };
      $scope.timeCounter = function(seconds) {
        if($scope.timerWithInterval==seconds) {
          $scope.resetTimerWithInterval();
          framework7App.alert('Time Over','');
        }
        else {
          $timeout(function () {
            $scope.timeCounter(seconds)
          }, 1000);
        }
      };
      $scope.submit = function() {
        $scope.timeList.push({"hour":hour,
                              "minutes":minutes,
                              "seconds":seconds,
                              "convertedSec":convertedSec,
                              "timeFlag": true});
        localStorage.setItem("timeListDetails", JSON.stringify($scope.timeList));
        $scope.hidePopup();
      };
      $scope.displayPopup = function(){
        $scope.popupAddTimer = true;
      }
      $scope.hidePopup = function(){
        $scope.popupAddTimer = false;
      }
     timerFactory.picker();
}]);

我使用了以下工厂方法:

var factoryApp = angular.module('clock.factories');
    factoryApp.factory('timerFactory',[
        function() {
          var timerFactory = {};
          var framework7App = new Framework7();
          var $$ = Dom7;
          var today = new Date();
          var arr,hour, minutes, seconds,convertedSec;
            timerFactory.picker = function() {
                framework7App.picker({
                  input: '#picker-date',
                  container: '#picker-date-container',
                  toolbar: false,
                  rotateEffect: true,
                  value: [today.getHours(), (today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes()), today.getSeconds()],
                  onOpen: function(p){
                  },
                  formatValue: function (p, values, displayValues) {
                    arr = displayValues[0] + ':' + values[1] + ':' +values[2];
                    hour = displayValues[0];
                    var  arrVal = arr.split(":");
                    convertedSec = (+arrVal[0] * 60 * 60 +(arrVal[1]) *60 +(+arrVal[2]));
                    minutes = values[1];
                    seconds = values[2];
                    return arr;
                  },
                  cols: [
                    // Hours
                    {
                      values: (function () {
                        var arr = [];
                        for (var i = 0; i <= 23; i++) { arr.push(i); }
                        return arr;
                      })(),
                    },
                    // Divider
                    {
                      divider: true,
                      content: ':'
                    },
                    // Minutes
                    {
                      values: (function () {
                        var arr = [];
                        for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
                        return arr;
                      })(),
                    },
                    // Divider
                    {
                      divider: true,
                      content: ':'
                    },
                    // Seconds
                    {
                      values: (function () {
                        var arr = [];
                        for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
                        return arr;
                    })(),
                  },
                ]
              });
                }
            return timerFactory;
        }]);

成功地称为Picker方法,但无法在工厂中编写其他方法($范围方法)。任何人都可以指导我如何做到这一点,因为我是Angularjs的新手。另外,让我知道,如何使用工厂(即小时,秒,分钟)进入控制器的变量?它也不允许我使用$范围和$ interval。

no也不允许$间隔

要在工厂中使用$interval服务,只需将其注入工厂施工功能:

app.factory("timerFactory", function($interval) {
                     //inject here   ^^^^^^^^^^
    var timer = {};
    timer.count = 0;
    var intervalPromise;
    timer.start = function() {
        if (intervalPromise) return;
        intervalPromise = $interval(()=>(timer.count++), 1000);
    };
    timer.stop = function() {
        $interval.cancel(intervalPromise);
        intervalPromise = null;
    };
    return timer;
});

jsfiddle上的演示。

最新更新