Saya mencari praktik terbaik tentang cara mengikat ke properti layanan di AngularJS.
Saya telah bekerja melalui beberapa contoh untuk memahami cara mengikat properti di layanan yang dibuat menggunakan AngularJS.
Di bawah ini saya memiliki dua contoh cara mengikat properti di layanan; keduanya bekerja. Contoh pertama menggunakan binding dasar dan contoh kedua menggunakan $ scope. $ Watch untuk mengikat ke properti layanan
Apakah salah satu dari contoh ini lebih disukai ketika mengikat ke properti dalam layanan atau apakah ada opsi lain yang saya tidak tahu yang akan direkomendasikan?
Premis dari contoh-contoh ini adalah bahwa layanan harus memperbarui propertinya "lastUpdated" dan "calls" setiap 5 detik. Setelah properti layanan diperbarui, tampilan harus mencerminkan perubahan ini. Kedua contoh ini berhasil; Saya ingin tahu apakah ada cara yang lebih baik untuk melakukannya.
Binding Dasar
Kode berikut dapat dilihat dan dijalankan di sini: 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>Cara lain saya memecahkan ikatan ke properti layanan adalah dengan menggunakan $ scope. $ Watch di controller.
$ scope. $ watch
Kode berikut dapat dilihat dan dijalankan di sini: 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>Saya sadar bahwa saya dapat menggunakan $ rootscope. $ Broadcast di layanan dan $ root. $ Di controller, tetapi dalam contoh lain yang saya buat yang menggunakan $ broadcast / $ pada siaran pertama tidak ditangkap oleh pengontrol, tetapi panggilan tambahan yang disiarkan dipicu di dalam pengontrol. Jika Anda mengetahui cara untuk menyelesaikan $ rootscope. $ Masalah siaran, berikan jawaban.
Tetapi untuk menyatakan kembali apa yang saya sebutkan sebelumnya, saya ingin mengetahui praktik terbaik tentang cara mengikat ke properti layanan.
Memperbarui
Pertanyaan ini awalnya diajukan dan dijawab pada April 2013. Pada Mei 2014, Gil Birman memberikan jawaban baru, yang saya ubah sebagai jawaban yang benar. Karena jawaban Gil Birman memiliki suara yang sangat sedikit, kekhawatiran saya adalah bahwa orang yang membaca pertanyaan ini akan mengabaikan jawaban yang mendukung jawaban lain dengan lebih banyak suara. Sebelum Anda membuat keputusan tentang apa jawaban terbaik, saya sangat merekomendasikan jawaban Gil Birman.