Я шукаю найкращу практику, як прив’язатись до сервісної властивості в AngularJS.
Я працював через кілька прикладів, щоб зрозуміти, як прив’язати до властивостей сервісу, створеного за допомогою AngularJS.
Нижче я маю два приклади того, як зв’язати властивості служби; вони обоє працюють. Перший приклад використовує базові прив'язки, а другий приклад використовує $ range. $ Watch для прив’язки до властивостей служби
Чи є один із цих прикладів кращим під час прив’язки до властивостей у службі чи є інший варіант, який мені не відомо про це, який би рекомендувався?
Передумовою цих прикладів є те, що сервіс повинен оновлювати свої властивості "lastUp updated" та "call" кожні 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>Інший спосіб, коли я вирішив прив'язку до властивостей сервісу, - це використовувати $ range. $ 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>Я знаю, що я можу використовувати $ rootcope. $ Мовлення в сервісі і $ root. $ On в контролері, але в інших прикладах, які я створив, що використовують $ Broadcast / $ в першій трансляції, не захоплюється контролер, але додаткові дзвінки, які транслюються, спрацьовують у контролері. Якщо вам відомо про спосіб вирішити проблему $ rootcope. $ Broadcast, будь ласка, надайте відповідь.
Але для перегляду того, що я згадував раніше, я хотів би знати найкращу практику прив’язки до властивостей служби.
Оновлення
На це питання було спочатку задано і відповіли у квітні 2013 року. У травні 2014 року Гіл Бірман дав нову відповідь, яку я змінив як правильну відповідь. Оскільки у відповіді Гіл Бірман дуже мало голосів, я занепокоєний тим, що люди, які читають це питання, не зважать на його відповідь на користь інших відповідей набагато більше голосів. Перш ніж приймати рішення про те, яка найкраща відповідь, я настійно рекомендую відповідь Гіл Бірман.