AngularJS: правильный способ привязки к свойствам сервиса
Я ищу лучший способ привязки к свойству службы в AngularJS.
Я работал с несколькими примерами, чтобы понять, как привязать свойства к сервису, созданному с помощью AngularJS.
Ниже у меня есть два примера того, как привязать свойства в сервисе; они оба работают. В первом примере используются базовые привязки, а во втором - $ scope. $ Watch для привязки к свойствам службы.
Является ли какой-либо из этих примеров предпочтительным при связывании со свойствами в службе или есть другой вариант, о котором я не знаю, который будет рекомендован?
Предпосылкой этих примеров является то, что сервис должен обновлять свои свойства «lastUpdated» и «звонки» каждые 5 секунд. После обновления свойств службы представление должно отражать эти изменения. Оба эти примера работают успешно; Интересно, есть ли лучший способ сделать это?
Базовая привязка
Следующий код можно просмотреть и запустить здесь: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>
Другой способ, которым я решил связать со свойствами сервиса, - это использовать $ scope. $ Watch в контроллере.
$ Сфера. $ Часы
Следующий код можно просмотреть и запустить здесь: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>
Я знаю, что могу использовать $ rootscope. $ Broadcast в сервисе и $ root. $ On в контроллере, но в других созданных мной примерах, которые используют $ broadcast / $ в первой трансляции, не фиксируется контроллер, но дополнительные вызовы, которые транслируются, запускаются в контроллере. Если вам известен способ решения проблемы с $ rootcope. $ Broadcast, пожалуйста, предоставьте ответ.
Но чтобы перефразировать то, что я упомянул ранее, я хотел бы узнать, как лучше всего связать сервис со свойствами.
ОбновитьЭтот вопрос был первоначально задан и получен ответ в апреле 2013 года. В мае 2014 года Джил Бирман предоставил новый ответ, который я изменил как правильный ответ. Поскольку у ответа Гила Бирмана очень мало голосов «за», я обеспокоен тем, что люди, читающие этот вопрос, проигнорируют его ответ в пользу других ответов с большим количеством голосов. Прежде чем принять решение о том, что является лучшим ответом, я настоятельно рекомендую ответ Гила Бирмана.