AngularJS: 绑定到服务属性的正确方法
我正在寻找如何绑定到 AngularJS 服务属性的最佳实践。
我已经通过多个示例了解了如何绑定到使用 AngularJS 创建的服务中的属性。
下面是两个关于如何绑定到服务中的属性的示例; 它们都可以工作。第一个示例使用基本绑定，第二个示例使用 $scope。$watch 绑定到服务属性
在绑定到服务中的属性时，这两个示例中的任何一个是首选的，还是有另一个我不知道的推荐选项？
这些示例的前提是，服务应该每5秒钟更新其属性“ lastUpdated”和“ call”。更新服务属性后，视图应该反映这些更改。这两个例子都很成功; 我想知道是否有更好的方法。
基本绑定
下面的代码可以在这里查看和运行: 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。在服务和 $root 中广播。但是在我创建的其他示例中，控制器不会捕获在第一次广播中使用 $Broadcasting/$的情况，但是会在控制器中触发其他广播的调用。如果您知道一种解决 $rootscope 的方法。$广播问题，请提供答案。
但是，为了重述我前面提到的内容，我想了解如何绑定到服务属性的最佳实践。
更新
这个问题最初是在2013年4月提出并得到回答的。2014年5月，吉尔 · 伯曼提供了一个新的答案，我把它改成了正确答案。由于吉尔 · 伯曼的回答只有很少的赞成票，我担心的是，读到这个问题的人会忽略他的回答，而赞成其他更多的投票的回答。在你决定什么是最好的答案之前，我强烈推荐吉尔 · 伯曼的答案。
最佳答案