Tôi đang tìm cách thực hành tốt nhất về cách liên kết với một tài sản dịch vụ trong AngularJS.
Tôi đã làm việc qua nhiều ví dụ để hiểu cách liên kết với các thuộc tính trong một dịch vụ được tạo bằng AngularJS.
Dưới đây tôi có hai ví dụ về cách liên kết với các thuộc tính trong một dịch vụ; cả hai đều làm việc. Ví dụ đầu tiên sử dụng các ràng buộc cơ bản và ví dụ thứ hai đã sử dụng $ scope. $ Watch để liên kết với các thuộc tính dịch vụ
Là một trong những ví dụ này được ưa thích khi liên kết với các thuộc tính trong một dịch vụ hoặc có một tùy chọn khác mà tôi không biết về điều đó sẽ được đề xuất không?
Tiền đề của những ví dụ này là dịch vụ nên cập nhật các thuộc tính của mình. Khi các thuộc tính dịch vụ được cập nhật, khung nhìn sẽ phản ánh những thay đổi này. Cả hai ví dụ này hoạt động thành công; Tôi tự hỏi nếu có một cách tốt hơn để làm điều đó.
Ràng buộc cơ bản
Các mã sau đây có thể được xem và chạy ở đây: 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>
Một cách khác tôi đã giải quyết ràng buộc với các thuộc tính dịch vụ là sử dụng $ scope. $ Watch trong bộ điều khiển.
$ phạm vi. $ xem
Các mã sau đây có thể được xem và chạy ở đây: 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>
Tôi biết rằng tôi có thể sử dụng $ rootscope. $ Broadcast trong dịch vụ và $ root. $ On trong bộ điều khiển, nhưng trong các ví dụ khác mà tôi đã tạo sử dụng $ Broadcast / $ trong lần phát đầu tiên không bị bắt bởi bộ điều khiển, nhưng các cuộc gọi bổ sung được phát sóng được kích hoạt trong bộ điều khiển. Nếu bạn biết một cách để giải quyết vấn đề $ rootscope. $ Broadcast, vui lòng cung cấp câu trả lời.
Nhưng để nói lại những gì tôi đã đề cập trước đó, tôi muốn biết cách thực hành tốt nhất về cách liên kết với một thuộc tính dịch vụ.
Cập nhật
Câu hỏi này ban đầu được hỏi và trả lời vào tháng 4 năm 2013. Vào tháng 5 năm 2014, Gil Birman đã cung cấp một câu trả lời mới, mà tôi đã thay đổi thành câu trả lời đúng. Vì câu trả lời của Gil Birman có rất ít phiếu bầu, nên mối quan tâm của tôi là những người đọc câu hỏi này sẽ bỏ qua câu trả lời của anh ta để ủng hộ các câu trả lời khác có nhiều phiếu hơn. Trước khi bạn đưa ra quyết định về câu trả lời hay nhất, tôi đánh giá cao câu trả lời của Gil Birman.