【AngularJS】コントローラーの変更がビューに反映されない時は$scope.apply();

jQueryのイベントを使ってモデルの値を変更した場合など、ビューに変更が伝わらない場合がある。

具体的には以下のような場合

HTML

<div id="images">
    <div ng-repeat="picture in pictures">
      <div class="img">
        <a target="_blank" href="">
          <img src="{{picture.img_url}}">
        </a>
      </div>
    </div>
</div>

.controller('PictureDetailController', function($scope, $http) {
  $(function() {
      //★初回クリック(jQueryのイベントを使用)
      $('#images').one('click', function() {
          $scope.pictures.push(picture);
      });
  });
}

このような場合は、手動でモデルの変更をビューへ伝える必要がある。 この時に使うのがapply()だ。上記の例を、applyを使ってモデルの変更をビューに伝えるよう修正する。

.controller('PictureDetailController', function($scope, $http) {
  $(function() {
      //初回クリック(jQueryのイベントを使用)
      $('#images').one('click', function() {
          $scope.pictures.push(picture);
          $scope.apply(); ★モデルの変更をビューに伝える
      });
  });
}

これで、ビューにモデルの変更が通知されて、DOMが変化している。