Question

我有一个工厂来管理我的应用程序的标准化当前时间，该时间具有公开的功能getTime()。

我在各种页面上显示;但是，它不会随着分钟的推移而更新。我在我的控制器中尝试下面的代码并希望每分钟获得一次当前时间的控制台日志，但是每次实际更改页面时它都会被打印出来。

    $scope.$watch(function () { return timeService.getTime() }, function (newVal, oldVal) {
        if (typeof newVal !== 'undefined') {
            console.log("$watch", newVal);
            $scope.currentTime = newVal;
        }
    }, true);

如何查看工厂功能的返回值？

更新

这是我的时间服务代码

    var _getTime = function () {
        return _formatTime(new Date());
    };

    var _formatTime = function (date) {
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        minutes = minutes < 10 ? '0'+minutes : minutes;
        var strTime = hours + ':' + minutes + ' ' + ampm;
        return strTime;
    };

Answer 1

我认为你的问题是新的Date（）只被调用一次。因此formatTime（new Date（））永远不会改变，因此手表永远不会被触发。您需要$ interval函数来保持刷新时间。像这样：

@CoordinatorLayout.DefaultBehavior

Answer 2

AngularJS无法猜测timeService.getTime()的值是否发生了变化。 Angular运行摘要周期响应某些事情，例如用户交互，这就是它仅适用于页面更改的原因。您需要手动运行$scope.$apply()来解决此问题。

但是，由于您需要每60秒进行一次可预测的更改，因此最好使用$interval（https://docs.angularjs.org/api/ng/service/ $ interval）服务：

$interval(function() {
  $scope.currentTime = timeService.getTime()
}, 60 * 1000) // runs every 60 seconds, or 60,000 milliseconds

Answer 3

以下是两个选项。 Live demo (click).

这适用于旧版本的Angular - 在1.2及更高版本中，您可以使用$interval服务，而不必使用setInterval并调用$apply来注册更新。

<div ng-app="myApp" ng-controller="MyCtrl">
  <!-- use an object property -->
  <p>time.now --- {{time.now}}</p>
  <!-- use a function as a binding -->
  <p>getTime() --- {{getTime()}}</p>
</div>

angular.module('myApp', [])
.controller('MyCtrl', function($scope, time, getTime) {
  $scope.time = time;
  $scope.getTime = getTime;
})
.factory('time', function($rootScope, dateFilter) {
  var time = {};
  function setTime() {
    time.now = dateFilter(Date.now(), 'medium');
  }
  // you can simplify this part to `$interval(setTime, 1000);` in Angular 1.2 or higher
  setInterval(function() {
    $rootScope.$apply(setTime);
  }, 1000);
  setTime();
  return time;
})
.factory('getTime', function($rootScope, dateFilter) {
  var time;
  function setTime() {
    time = dateFilter(Date.now(), 'medium');
  }
  setInterval(function() {
    $rootScope.$apply(setTime);
  }, 1000);
  setTime();
  return function() {
    return time;
  };
})
;

$观看工厂的功能返回

3 个答案: