我正在寻找有关如何绑定到AngularJS中的服务属性的最佳实践。
我已经研究了多个示例，以了解如何绑定到使用AngularJS创建的服务中的属性。
下面有两个关于如何绑定到服务中的属性的示例。他们都工作。第一个示例使用基本绑定，第二个示例使用$ scope。$ watch绑定到服务属性
当绑定到服务中的属性时，这些示例是首选还是建议使用其他我不知道的选项？
这些示例的前提是服务应每5秒更新其属性“ lastUpdated”和“ calls”。服务属性更新后，视图应反映这些更改。这两个示例均成功运行；我想知道是否有更好的方法。
基本绑定
可以在下面的代码中查看和运行以下代码：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。
$ 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。$ broadcast并在控制器中使用$ root。$ on，但是在我创建的其他示例中，第一次广播未使用$ broadcast / $捕获了控制器，但是在控制器中触发了广播的其他呼叫。如果您知道解决$ rootscope。$ broadcast问题的方法，请提供答案。
但是要重申一下我前面提到的内容，我想知道有关如何绑定到服务属性的最佳实践。
更新资料
最初在2013年4月提出并回答了这个问题。2014年5月，Gil Birman提供了一个新答案，我将其更改为正确答案。由于吉尔·伯曼（Gil Birman）的回答几乎没有票数，因此我担心的是，阅读此问题的人会无视他的回答，而赞成其他票数更多的回答。在您决定最佳答案之前，我强烈建议您使用Gil Birman的答案。