आप पहले से ही इसे सही कर रहे थे। यानी सेवा को एक स्कोप चर में धक्का दे रहा है और फिर स्कोप चर के हिस्से के रूप में सेवा को देख रहा है।
http://plnkr.co/edit/SgA0ztPVPxTkA0wfS1HU?p=preview
एचटीएमएल
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.1.3/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="start()">Start Count</button>
<button ng-click="stop()">Stop Count</button>
ControllerData: {{controllerData}}
</body>
</html>
जावास्क्रिप्ट:
यहाँ आप के लिए काम कर रहे समाधान है
+०१२३५१६४१०:
var app = angular.module('plunker', []);
app.service('myService', function($rootScope) {
var data = 0;
var id = 0;
var increment = function() {
data = data + 1;
$rootScope.$apply();
console.log("Incrementing data", data);
};
this.start = function() {
id = setInterval(increment, 500) ;
};
this.stop = function() {
clearInterval(id);
};
this.getData = function() { return data; };
}).controller('MainCtrl', function($scope, myService) {
$scope.service = myService;
$scope.controllerData = 0;
$scope.start = function() {
myService.start();
};
$scope.stop = function() {
myService.stop();
};
$scope.$watch('service.getData()', function(newVal) {
console.log("New Data", newVal);
$scope.controllerData = newVal;
});
});
यहाँ बातें आपको याद में से कुछ हैं
- $ क्षेत्र में चर के क्रम। $ घड़ी गलत थी। इसकी (newVal, oldVal) और दूसरी तरफ नहीं।
- चूंकि आप setInterval के साथ काम कर रहे थे, जो एक एसिंक ऑपरेशन है, आपको कोणीय को यह जानना होगा कि चीजें बदली गई हैं। यही कारण है कि आपको $ rootScope की आवश्यकता है। $ लागू करें।
- आप $ फ़ंक्शन देख नहीं सकते हैं, लेकिन आप देख सकते हैं कि फ़ंक्शन रिटर्न क्या है।
मेरा डाउनवोट इसलिए है क्योंकि प्लंकर चला गया है, इसलिए कोड है, जो इस प्रश्न (और उत्तर) को बेकार करता है। :(यहां कोड डालें और मैं आपका प्रश्न +1 करूंगा। –