AngularJS文档提供$interval了一个示例,该示例$interval在控制器中使用以管理用户可以在视图中播放的计时器。您可以通过单击n链接在angularJS文档页面上阅读官方示例的代码。
$interval
我试图将代码从示例控制器移回到服务中,以便使代码更具模块化。但是应用程序未将服务连接到视图。我已经在plnkr中重新创建了该问题,您可以通过单击此链接来解决该问题。
需要对上述plnkr中的代码进行哪些特定更改,以便该mytimer服务可以作为导入服务的控制器的属性提供给视图?
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是:
app.js
angular.module('intervalExample',['ExampleController'])
代码exampleController.js是:
exampleController.js
angular .module('intervalExample', ['mytimer']) .controller('ExampleController', function($scope, mytimer) { $scope.mytimer = mytimer; });
代码myTimer.js是:
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函数)。
this
bind
$this
同样,您在app.js和中两次声明了模块exampleController mytimer.js。
mytimer.js
看看这个工作的Plunker:http ://plnkr.co/edit/34rlsjzH5KWaobiungYI?p=preview