Ich suche nach der besten Methode zum Binden an eine Service-Eigenschaft in AngularJS.
Ich habe mehrere Beispiele durchgearbeitet, um zu verstehen, wie man an Eigenschaften in einem Dienst bindet, der mit AngularJS erstellt wurde.
Im Folgenden habe ich zwei Beispiele für das Binden an Eigenschaften in einem Dienst. Sie arbeiten beide. Im ersten Beispiel werden grundlegende Bindungen verwendet, und im zweiten Beispiel wurde $ scope. $ Watch verwendet, um an die Serviceeigenschaften zu binden
Werden diese Beispiele bevorzugt, wenn Sie an Eigenschaften eines Dienstes binden, oder gibt es eine andere Option, von der ich nicht weiß, dass sie empfohlen wird?
Die Voraussetzung dieser Beispiele ist, dass der Dienst seine Eigenschaften "lastUpdated" und "calls" alle 5 Sekunden aktualisiert. Sobald die Serviceeigenschaften aktualisiert wurden, sollte die Ansicht diese Änderungen widerspiegeln. Beide Beispiele funktionieren erfolgreich. Ich frage mich, ob es einen besseren Weg gibt.
Grundbindung
Der folgende Code kann hier angezeigt und ausgeführt werden: http://plnkr.co/edit/d3c16z
<html>
<body ng-app="ServiceNotification" >
<div ng-controller="TimerCtrl1" style="border-style:dotted">
TimerCtrl1 <br/>
Last Updated: {{timerData.lastUpdated}}<br/>
Last Updated: {{timerData.calls}}<br/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("ServiceNotification", []);
function TimerCtrl1($scope, Timer) {
$scope.timerData = Timer.data;
};
app.factory("Timer", function ($timeout) {
var data = { lastUpdated: new Date(), calls: 0 };
var updateTimer = function () {
data.lastUpdated = new Date();
data.calls += 1;
console.log("updateTimer: " + data.lastUpdated);
$timeout(updateTimer, 5000);
};
updateTimer();
return {
data: data
};
});
</script>
</body>
</html>
Die andere Möglichkeit, die Bindung an Serviceeigenschaften zu lösen, besteht darin, $ scope. $ Watch im Controller zu verwenden.
$ scope. $ watch
Der folgende Code kann hier angezeigt und ausgeführt werden: http://plnkr.co/edit/dSBlC9
<html>
<body ng-app="ServiceNotification">
<div style="border-style:dotted" ng-controller="TimerCtrl1">
TimerCtrl1<br/>
Last Updated: {{lastUpdated}}<br/>
Last Updated: {{calls}}<br/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("ServiceNotification", []);
function TimerCtrl1($scope, Timer) {
$scope.$watch(function () { return Timer.data.lastUpdated; },
function (value) {
console.log("In $watch - lastUpdated:" + value);
$scope.lastUpdated = value;
}
);
$scope.$watch(function () { return Timer.data.calls; },
function (value) {
console.log("In $watch - calls:" + value);
$scope.calls = value;
}
);
};
app.factory("Timer", function ($timeout) {
var data = { lastUpdated: new Date(), calls: 0 };
var updateTimer = function () {
data.lastUpdated = new Date();
data.calls += 1;
console.log("updateTimer: " + data.lastUpdated);
$timeout(updateTimer, 5000);
};
updateTimer();
return {
data: data
};
});
</script>
</body>
</html>
Ich bin mir bewusst, dass ich $ rootcope. $ Broadcast im Dienst und $ root. $ On im Controller verwenden kann, aber in anderen Beispielen, die ich erstellt habe und die $ Broadcast / $ bei der ersten Sendung verwenden, wird vom nicht erfasst Controller, aber zusätzliche Anrufe, die gesendet werden, werden im Controller ausgelöst. Wenn Sie einen Weg kennen, um das Problem mit $ rootcope. $ Broadcast zu lösen, geben Sie bitte eine Antwort.
Um jedoch noch einmal zu erwähnen, was ich bereits erwähnt habe, möchte ich die bewährte Methode zum Binden an Serviceeigenschaften kennen.
Aktualisieren
Diese Frage wurde ursprünglich im April 2013 gestellt und beantwortet. Im Mai 2014 gab Gil Birman eine neue Antwort, die ich als richtige Antwort geändert habe. Da die Antwort von Gil Birman nur sehr wenige Stimmen hat, befürchte ich, dass die Leute, die diese Frage lesen, seine Antwort zugunsten anderer Antworten mit viel mehr Stimmen ignorieren. Bevor Sie sich für die beste Antwort entscheiden, empfehle ich die Antwort von Gil Birman.