javascript - 如何在工厂中移动 Controller 代码

Question

我的 Controller 中有一些代码，但代码是可重用的。所以我想将它移到工厂中，然后每次需要时使用工厂...我无法将此代码移动到工厂..如果我移动它，就没有任何作用了。这是我 Controller 中的代码，我想将其移到工厂中:

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;
        }]);

成功调用选取器方法，但无法在工厂中编写其他方法($scope 方法)。任何人都可以指导我如何做到这一点，因为我是 angularJS 的新手。另外让我知道，如何将工厂变量(即小时、秒、分钟)使用到 Controller 中？它还不允许我使用 $scope 和 $interval。

Answer 1

no its not allowed $interval as well

要在工厂中使用$interval服务，只需将其注入(inject)到工厂构造函数中即可:

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;
});

DEMO on JSFiddle .