如何将间隔服务连接到视图？

储承

2023-03-14

问题内容：

AngularJS文档提供$interval了一个示例，该示例$interval在控制器中使用以管理用户可以在视图中播放的计时器。您可以通过单击n链接在angularJS文档页面上阅读官方示例的代码。

我试图将代码从示例控制器移回到服务中，以便使代码更具模块化。但是应用程序未将服务连接到视图。我已经在plnkr中重新创建了该问题，您可以通过单击此链接来解决该问题。

需要对上述plnkr中的代码进行哪些特定更改，以便该mytimer服务可以作为导入服务的控制器的属性提供给视图？

总结一下，“ index.html”为：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example109-production</title>
    <script src="myTimer.js" type="text/javascript"></script>
    <script src="exampleController.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

</head>
<body ng-app="intervalExample">

<div>
  <div ng-controller="ExampleController">
    <label>Date format: <input ng-model="mytimer.format"></label> <hr/>
    Current time is: <span my-current-time="mytimer.format"></span>
    <hr/>
    Blood 1 : <font color='red'>{{mytimer.blood_1}}</font>
    Blood 2 : <font color='red'>{{mytimer.blood_2}}</font>
    <button type="button" data-ng-click="mytimer.fight()">Fight</button>
    <button type="button" data-ng-click="mytimer.stopFight()">StopFight</button>
    <button type="button" data-ng-click="mytimer.resetFight()">resetFight</button>
  </div>
</div>
</body>
</html>

代码app.js是：

angular.module('intervalExample',['ExampleController'])

代码exampleController.js是：

angular
.module('intervalExample', ['mytimer'])
.controller('ExampleController', function($scope, mytimer) {

    $scope.mytimer = mytimer;

});

代码myTimer.js是：

angular
.module('mytimer', [])
.service('mytimer', ['$rootScope', function($rootScope, $interval) {

    var $this = this;
    this.testvariable = "some value. ";

        this.format = 'M/d/yy h:mm:ss a';
        this.blood_1 = 100;
        this.blood_2 = 120;

        var stop;
        this.fight = function() {
          // Don't start a new fight if we are already fighting
          if ( angular.isDefined(stop) ) return;

          stop = $interval(function() {
            if (this.blood_1 > 0 && this.blood_2 > 0) {
              this.blood_1 = this.blood_1 - 3;
              this.blood_2 = this.blood_2 - 4;
            } else {
              this.stopFight();
            }
          }, 100);
        };

        this.stopFight = function() {
          if (angular.isDefined(stop)) {
            $interval.cancel(stop);
            stop = undefined;
          }
        };

        this.resetFight = function() {
          this.blood_1 = 100;
          this.blood_2 = 120;
        };

        this.$on('$destroy', function() {
          // Make sure that the interval is destroyed too
          this.stopFight();
        });

}])

    // Register the 'myCurrentTime' directive factory method.
    // We inject $interval and dateFilter service since the factory method is DI.
    .directive('myCurrentTime', ['$interval', 'dateFilter',
      function($interval, dateFilter) {
        // return the directive link function. (compile function not needed)
        return function(scope, element, attrs) {
          var format,  // date format
              stopTime; // so that we can cancel the time updates

          // used to update the UI
          function updateTime() {
            element.text(dateFilter(new Date(), format));
          }

          // watch the expression, and update the UI on change.
          scope.$watch(attrs.myCurrentTime, function(value) {
            format = value;
            updateTime();
          });

          stopTime = $interval(updateTime, 1000);

          // listen on DOM destroy (removal) event, and cancel the next UI update
          // to prevent updating time after the DOM element was removed.
          element.on('$destroy', function() {
            $interval.cancel(stopTime);
          });
        }
      }]);;

上述所有代码均以“工作”形式在此plnkr中进行汇编，可用于诊断和确定问题的解决方案。
那么，需要对上面的代码进行哪些特定的更改，以允许用户通过视图与服务进行交互？

问题答案：

首先，您没有将$ interval注入mytimer服务，而是尝试使用它。

其次，您在mytimer服务中遇到范围问题：

stop = $interval(function() {
    if (this.blood_1 > 0 && this.blood_2 > 0) {
        this.blood_1 = $this.blood_1 - 3;
        this.blood_2 = $this.blood_2 - 4;
    } else {
        this.stopFight();
    }
}, 100);

声明函数时，您要创建一个新的作用域，这意味着该this对象指向一个新的作用域。您可以使用bind或使用$this在第5行中声明的变量。（在ES2015中，您可以简单地使用arrow函数）。

同样，您在app.js和中两次声明了模块exampleController mytimer.js。

看看这个工作的Plunker：http
://plnkr.co/edit/34rlsjzH5KWaobiungYI?p=preview

如何将间隔服务连接到视图？

相关阅读

相关文章

相关问答

相关工具

相关文档