AngularJS: Die richtige Art der Bindung an Serviceeigenschaften
Ich suche nach bewährten Methoden zum Binden an eine Service-Eigenschaft in AngularJS.
Ich habe mehrere Beispiele durchgearbeitet, um zu verstehen, wie Eigenschaften in einem mit AngularJS erstellten Dienst gebunden werden.
Im Folgenden finden Sie zwei Beispiele für das Binden an Eigenschaften in einem Service. Sie arbeiten beide. Im ersten Beispiel werden grundlegende Bindungen verwendet, und im zweiten Beispiel wird $ scope. $ Watch zum Binden an die Diensteigenschaften verwendet
Wird eines dieser Beispiele beim Binden an Eigenschaften in einem Service bevorzugt, oder gibt es eine andere Option, die mir nicht bekannt ist, die empfohlen wird?
In diesen Beispielen wird davon ausgegangen, dass der Dienst seine Eigenschaften "lastUpdated" und "calls" alle 5 Sekunden aktualisiert. Sobald die Diensteigenschaften 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, ist die Verwendung von $ scope. $ Watch im Controller.
$ 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>
Mir ist bewusst, dass ich $ rootscope. $ Broadcast im Dienst und $ root. $ On im Controller verwenden kann, aber in anderen Beispielen, die ich erstellt habe und die $ broadcast / $ bei der ersten Übertragung verwenden, wird von der nicht erfasst Controller, aber zusätzliche Anrufe, die gesendet werden, werden im Controller ausgelöst. Wenn Sie wissen, wie Sie das $ rootscope. $ Broadcast-Problem lösen können, geben Sie bitte eine Antwort.
Um jedoch noch einmal zu wiederholen, was ich zuvor erwähnt habe, möchte ich die bewährte Methode zum Binden an Service-Eigenschaften kennen.
AktualisierenDiese Frage wurde ursprünglich im April 2013 gestellt und beantwortet. Im Mai 2014 gab Gil Birman eine neue Antwort, die ich als die richtige Antwort geändert habe. Da die Antwort von Gil Birman nur sehr wenige positive Stimmen hat, ist meine Sorge, dass die Leser dieser Frage 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.