サーバーから更新されるモデルを使用する angularjs に以下のカスタム ディレクティブがあり、そのモデルの変更を監視するためのウォッチ リスナーを追加しました。
var linkFn;
linkFn = function(scope, element, attrs) {
scope.$watch('$parent.photogallery', function(newValue, oldValue) {
if(angular.isUndefined(newValue)) {
return;
}
var $container = element;
alert($container.element);
$container.imagesLoaded(function() {
$container.masonry({
itemSelector : '.box'
});
});
});
};
return {
templateUrl:'templates/Photos_Masonry.htm',
replace: false,
transclude:true,
scope: {
photogallery: '=photoGallery',
},
restrict: 'A',
link: linkFn
ただし、watch ディレクティブでデバッグすると、テンプレートの式がまだ解決されていないことがわかります。つまり、photo.label、ng-src はすべてまだ解決されていません。AFIK、$digest は $eval の後にのみ呼び出されます。これは意図した動作ですか? これが原因で jQuery 呼び出しが機能しませんか? 評価された式で結果要素を取得する他のイベントはありますか?
これが ng-repeat を含む私のテンプレートです。
<div id="container" class="clearfix">
<div class="box col2" ng-repeat="photo in photogallery">
<a ng-href="#/viewphotos?id={{photo.uniqueid}}&&galleryid={{galleryid}}"
title="{{photo.label}}"><img
ng-src="{{photo.thumbnail_url}}" alt="Stanley" class="fade_spot" /></a>
<h3>
<span style="border-bottom: 1px solid black;font-weight:normal;font-size:14px;">{{galleryname}}</span>
</h3>
<h3>
<span style="color:#20ACB8;font-weight:normal;font-size:17px;">{{photo.seasonname}}</span>
</h3>
</div>
</div>
フォトギャラリーは親コントローラーで初期化され、
function MyCtrlCampaign($scope, srvgallery, mygallery) {
$scope.updatedata = function() {
$scope.photogallery = srvgallery.getphotos($routeParams);
};
$scope.getphotos = function() {
srvgallery.photos().success(function(data) {
$scope.updatedata();
}).error(function(data) {
});
};
ディレクティブは以下のように使用されます。
<div masonry photo-gallery="photogallery" >
</div>
これについてのご意見をお聞かせください。