リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

【AngularJS】 バインドした値をAngularJS外のスコープから更新する


AngularJS-large

 

AngularJSでバインドした値を、クロージャ内など AngularJS のスコープ外から更新する際の対処法です。

AngularJS では バインドした値を AngularJS のスコープ外から更新した値はビュー等に反映されません。下記はその例になります。

[html]
<!-- html -->
<div ng-controller="MyCtrl">
Hello, {{name}}!
</div>
[/html]
[js]
// javascript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
$scope.name = 'world';

setTimeout(function () {
$scope.name = 'timeout';
}, 2000);

}
[/js]

JSFIDDLE(プレビュー)

このように2秒経過しても値が更新されません。

このような場合には AngularJS の $rootScope サービスを使って、AngularJS 内のスコープからクロージャを実行します。

[js]
// javascript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, $rootScope) {
$scope.name = 'world';

setTimeout(function () {
$rootScope.$apply(function () {
$scope.name = 'timeout';
});
}, 2000);

}
[/js]

JSFIDDLE

こうする事で2秒経過後に値が更新されます。

これだけを見るとAjax通信のコールバックを書くたびに $rootScope サービスを使うのか?
等の疑問がわきますが、AngularJS では $rootScope サービスをラップしたサービスが提供されていますので、AngularJS のスコープを意識する必要は殆どありません。

$timeout サービスを使用した実例です。

[js]
// javascript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, $timeout) {
$scope.name = 'world';

$timeout(function () {
$scope.name = 'timeout';
}, 2000);

}
[/js]

JSFIDDLE

こちらの場合でも2秒後に値が更新されることが確認できます。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック