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

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（プレビュー）

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

このような場合には 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

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

これだけを見ると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

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