AngularJS: правильный способ привязки к свойствам сервиса
я ищу лучшую практику того, как связать со свойством службы в AngularJS.
Я работал с несколькими примерами, чтобы понять, как привязать свойства к сервису, созданному с помощью AngularJS.
Ниже у меня есть два примера того, как привязать свойства в сервисе; они оба работают. В первом примере используются базовые привязки, а во втором - $ scope. $ Watch для привязки к свойствам службы.
Любой из этих примеров предпочтителен при привязке к свойствам в службе или есть другой вариант, который яЯ не знаю, что будет рекомендовано?
Предпосылка этих примеров заключается в том, что сервис должен обновить свои свойствапоследнее обновление" а также "звонки» каждые 5 секунд. После обновления свойств службы представление должно отражать эти изменения. Оба эти примера работают успешно; Интересно, есть ли лучший способ сделать это?
Базовая привязка
Следующий код можно просмотреть и запустить здесь:http://plnkr.co/edit/d3c16z
TimerCtrl1 <br>
Last Updated: {{timerData.lastUpdated}}<br>
Last Updated: {{timerData.calls}}<br>
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
};
});
Другой способ, которым я решил связать со свойствами сервиса, - это использовать $ scope. $ Watch в контроллере.
$ Сфера. $ Часы
Следующий код можно просмотреть и запустить здесь:http://plnkr.co/edit/dSBlC9I»
TimerCtrl1<br>
Last Updated: {{lastUpdated}}<br>
Last Updated: {{calls}}<br>
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
};
});
Я знаю, что могу использовать $ rootscope. $ broadcast в службе и $ root. $ on в контроллере, но в других примерах, которые ясозданный, который использует $ broadcast / $ в первой трансляции, не перехватывается контроллером, но дополнительные вызовы, которые передаются, запускаются в контроллере. Если вам известен способ решения проблемы с $ rootcope. $ Broadcast, пожалуйста, предоставьте ответ.
Но чтобы перефразировать то, что я упомянул ранее, я хотел бы узнать, как лучше всего связать сервис со свойствами.
ОбновитьЭтот вопрос был первоначально задан и получен ответ в апреле 2013 года. В мае 2014 года Джил Бирман предоставил новый ответ, который я изменил как правильный ответ. Поскольку у ответа Гила Бирмана очень мало голосов «за», я обеспокоен тем, что люди, читающие этот вопрос, проигнорируют его ответ в пользу других ответов с большим количеством голосов. Прежде чем принять решение о том, чтолучший ответ, я очень рекомендую Джил Бирманответ.