AngularJS 文档$interval给出了$interval在控制器中使用来管理用户可以在视图中使用的计时器的示例。您可以通过单击此链接在 angularJS 文档页面阅读官方示例的代码。
我试图将代码从示例控制器移回服务，以便代码可以更加module化。但是应用程序没有将服务连接到视图。我在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中以“工作”形式组装，您可以使用它来诊断和确定问题的解决方案。 那么需要对上面的代码做哪些具体的修改，才能让用户通过视图与服务进行交互呢？