NULL

AngularJS – $scope.$watch()が効かない

ページタイトルを動的に変更したい場合
$scopeのtitleを格納させて監視させるのですが、
なかなか値が監視されず、ハマってしまいました。

$scope.$watch('title', function(newVal, oldVal, scope) {
  console.log('watch', [newVal, oldVal], scope);
},true);

 

格納させるタイミングが外部ライブラリのコールバック関数内に記述しており
更新を反映させるためには$scope.$apply()を呼び出す必要があるようです。

 onSlideChangeEnd: function(swp) {
   console.log('onSlideChangeEnd', $scope);
   var $el = $(swp.slides[swp.activeIndex]);
   $scope.title = ($el.attr("data-title") + " | Site Name");
   $scope.$apply();
 }

 

上記はSwiper.jsをコールバック関数内の例です。

 

Demo Site

AngularJS 1.5.7
jQuery 2.2.4
SwiperJS 3.3.1

@see – AngularJSでデータバインドが効かないときは $scope.$apply