Je recherche les meilleures pratiques sur la façon de se lier à une propriété de service dans AngularJS.
J'ai travaillé sur plusieurs exemples pour comprendre comment se lier à des propriétés dans un service créé à l'aide d'AngularJS.
Ci-dessous, j'ai deux exemples de la manière de se lier à des propriétés dans un service; ils fonctionnent tous les deux. Le premier exemple utilise des liaisons de base et le deuxième exemple utilise $ scope. $ Watch pour se lier aux propriétés du service
L'un de ces exemples est-il préféré lors de la liaison à des propriétés dans un service ou existe-t-il une autre option dont je ne suis pas au courant qui serait recommandée?
Le principe de ces exemples est que le service devrait mettre à jour ses propriétés «lastUpdated» et «calls» toutes les 5 secondes. Une fois les propriétés du service mises à jour, la vue doit refléter ces changements. Ces deux exemples fonctionnent avec succès; Je me demande s'il existe une meilleure façon de procéder.
Reliure de base
Le code suivant peut être affiché et exécuté ici: 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>
L'autre façon dont j'ai résolu la liaison aux propriétés du service est d'utiliser $ scope. $ Watch dans le contrôleur.
$ scope. $ watch
Le code suivant peut être affiché et exécuté ici: 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>
Je sais que je peux utiliser $ rootscope. $ Broadcast dans le service et $ root. $ On dans le contrôleur, mais dans d'autres exemples que j'ai créés, l'utilisation de $ broadcast / $ lors de la première diffusion n'est pas capturée par le contrôleur, mais les appels supplémentaires qui sont diffusés sont déclenchés dans le contrôleur. Si vous connaissez un moyen de résoudre le problème de diffusion de $ rootscope. $, Veuillez fournir une réponse.
Mais pour reformuler ce que j'ai mentionné plus tôt, j'aimerais connaître la meilleure pratique de liaison à des propriétés de service.
Mettre à jour
Cette question a été initialement posée et répondue en avril 2013. En mai 2014, Gil Birman a fourni une nouvelle réponse, que j'ai changée en réponse correcte. Étant donné que la réponse de Gil Birman a très peu de votes positifs, je crains que les personnes lisant cette question ne tiendront pas compte de sa réponse en faveur d'autres réponses avec beaucoup plus de votes. Avant de prendre une décision sur la meilleure réponse, je recommande vivement la réponse de Gil Birman.