ฉันกำลังมองหาวิธีปฏิบัติที่ดีที่สุดในการเชื่อมโยงกับคุณสมบัติบริการใน 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>ฉันทราบว่าฉันสามารถใช้ $ rootcope $ broadcast ในบริการและ $ root $ $ ในคอนโทรลเลอร์ แต่ในตัวอย่างอื่น ๆ ที่ฉันสร้างขึ้นโดยใช้ $ broadcast / $ เมื่อออกอากาศครั้งแรกไม่ได้ถูกจับ คอนโทรลเลอร์ แต่การโทรเพิ่มเติมที่ออกอากาศจะถูกเรียกใช้ในคอนโทรลเลอร์ หากคุณตระหนักถึงวิธีการแก้ $ rootcope ปัญหาการออกอากาศ $ โปรดระบุคำตอบ
แต่เพื่อย้ำสิ่งที่ฉันพูดถึงก่อนหน้านี้ฉันต้องการทราบวิธีปฏิบัติที่ดีที่สุดของการผูกกับคุณสมบัติของบริการ
ปรับปรุง
แต่เดิมคำถามนี้ถูกถามและตอบในเดือนเมษายน 2013 ในเดือนพฤษภาคม 2014 Gil Birman ได้ให้คำตอบใหม่ซึ่งฉันเปลี่ยนเป็นคำตอบที่ถูกต้อง เนื่องจากคำตอบของ Gil Birman มีการโหวตน้อยมากข้อกังวลของฉันคือผู้ที่อ่านคำถามนี้จะไม่สนใจคำตอบของเขาเพราะชอบคำตอบอื่น ๆ ที่มีการโหวตมากขึ้น ก่อนที่คุณจะตัดสินใจว่าคำตอบที่ดีที่สุดคืออะไรฉันขอแนะนำคำตอบของ Gil Birman