Im ищет наилучшую практику того, как привязываться к свойству службы в AngularJS.
Я работал с несколькими примерами, чтобы понять, как привязываться к свойствам в службе, созданной с помощью AngularJS.
Ниже у меня есть два примера того, как привязываться к свойствам в службе; они оба работают. В первом примере используются основные привязки, а во втором примере используется $scope. $Watch для привязки к свойствам службы
Являются ли какие-либо из этих примеров предпочтительными при привязке к свойствам в службе или есть ли другой вариант, который Im не знал об этом, рекомендуется?
Предпосылка этих примеров заключается в том, что служба должна обновлять свои свойства "lastUpdated" и "calls" каждые 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. $в контроллере, но в других примерах, которые Ive создал, которые используют $broadcast/$в первой трансляции, не захватываются контроллером, но дополнительные вызовы, которые транслируются, запускаются в контроллере. Если вам известно о способе решения проблемы $cccpcpед. $Broadcast, предоставьте ответ.
Но чтобы повторить то, что я упомянул ранее, я хотел бы знать, как лучше всего привязываться к свойствам службы.
Обновление
Этот вопрос изначально был задан и ответил в апреле 2013 года. В мае 2014 года Гил Бирман дал новый ответ, который я изменил как правильный ответ. Поскольку ответ Гил Бирман имеет очень мало голосов, я обеспокоен тем, что люди, читающие этот вопрос, будут игнорировать его ответ в пользу других ответов с гораздо большим количеством голосов. Прежде чем принять решение о том, какой лучший ответ, я настоятельно рекомендую ответить Гил Бирман.