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

The AngularJS documentation for $interval gives an example of using $interval in a controller to manage a timer that the user can play with in a view. You can read the code for the official example at the angularJS documentation page by clicking n this link.

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

I have tried to move the code from the example controller back into a service so that the code can be more modular. But the app is not connecting the service to the view. I have recreated the problem in a plnkr that you can play with by clicking on this link.

我已经尝试将代码从示例控制器移回服务，以便代码更模块化。但是这个应用程序并没有将服务连接到视图。我已经在一个plnkr中重新创建了这个问题，你可以点击这个链接来解决它。

What specific changes need to be made to the code in the plnkr above so that the mytimer service can be available to the view as a property of the controller that imports the service?

需要对上面plnkr中的代码进行哪些特定的更改，以便将mytimer服务作为导入服务的控制器的属性可用?

To summarize here, 'index.html` is:

总结,指数。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>

The code for app.js is:

js的代码是:

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

The code for exampleController.js is:

exampleController的代码。js是:

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

    $scope.mytimer = mytimer;

});

The code for myTimer.js is:

定时器的代码。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);
          });
        }
      }]);;

All of the above code is assembled in "working" form in this plnkr that you can use to diagnose and identify the solution to the problem. So what specific changes need to be made to the code above to allow the user to interact with the service through the view?

以上所有代码都是在plnkr的“工作”表单中组装的，您可以使用它来诊断和识别问题的解决方案。因此，需要对上面的代码进行哪些特定的更改，以允许用户通过视图与服务交互?

1 个解决方案

#1

First, you didn't inject the $interval to the mytimer service and did try to use it.

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

secondly, you had scope issues in the mytimer service:

其次，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);

when declaring a function you are creating a new scope, meaning the this is pointing to a new scope. you can either use bind or to use the $this variable you declared in line 5. (in ES2015 you could simply use the arrow function).

在声明一个函数时，您正在创建一个新的范围，这意味着这个范围指向一个新的范围。您可以使用bind或使用第5行中声明的$this变量。(在ES2015中，你可以使用箭头函数)。

also you declared the module exampleController twice in app.js and in mytimer.js.

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

Take a look at this working Plunker:
http://plnkr.co/edit/34rlsjzH5KWaobiungYI?p=preview

看看这个工作柱塞:http://plnkr.co/edit/34rlsjzh5kwaobiungyi?

#1