AngularJSでサービスプロパティにバインドする方法のベストプラクティスを探しています。
AngularJSを使用して作成されたサービスのプロパティにバインドする方法を理解するために、複数の例に取り組みました。
以下に、サービスのプロパティにバインドする方法の2つの例を示します。どちらも機能します。最初の例では基本的なバインディングを使用し、2番目の例では$ scope。$ watchを使用してサービスプロパティにバインドしました
これらの例のいずれかがサービスのプロパティにバインドするときに推奨されますか、それとも私が知らない、推奨される別のオプションがありますか？
これらの例の前提は、サービスがそのプロパティを「lastUpdated」と「calls」を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>サービスプロパティへのバインドを解決するもう1つの方法は、コントローラーで$ 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 / $ onを使用して最初のブロードキャストはコントローラーですが、ブロードキャストされる追加の呼び出しはコントローラーでトリガーされます。$ rootscope。$ broadcastの問題を解決する方法を知っている場合は、回答を提供してください。
しかし、先ほど述べたことを説明し直すために、サービスプロパティにバインドする方法のベストプラクティスを知りたいと思います。
更新
この質問は、元々2013年4月に質問され、回答されました。2014年5月に、Gil Birmanが新しい回答を提供しました。これを正解に変更しました。Gil Birmanの回答には賛成票がほとんどないため、この質問を読んでいる人は彼の回答を無視して、投票数が多い他の回答を支持するのではないかと心配しています。ベストアンサーを決定する前に、ギルバーマンのアンサーを強くお勧めします。