サーバー上のファイルのリストを表示するページの一部があります。ユーザーがファイルを選択して、AngularUI を使用してライトボックス ダイアログに表示できるようにしたいと考えています。ダイアログ テンプレートに正しく表示されるファイル名を取得する方法がわかりません。ここに私のファイルリストhtmlがあります:
<tr ng-repeat="file in files | orderBy:orderProp">
<td><a href='#' ng-click="openInLightbox(file.linkURL)">{{file.name}}</a></td>
</tr>
そして、そのビューのコントローラーの該当する部分は次のとおりです。
function FileListCtrl($scope, $http, $dialog)
{
.
.
.
$scope.openInLightbox = function(item){
var d = $dialog.dialog({
modalFade: false,
resolve: {item: function(){ return angular.copy(item); } }});
d.open('dialogs/lightboxTemplate.html', 'LightboxController');
}
}
ここにライトボックスコントローラーがあります:
app.controller('LightboxController', ['$scope', 'dialog', 'item', function($scope, dialog, item){
$scope.item = item;
console.log("item:" + item);
$scope.submit = function(){
dialog.close('ok');
};
}]);
ここに私のダイアログテンプレートがあります:
<img src={{item}} />
わからないことが2つあります。
1) 正しく選択した最初の画像にライトボックスが表示されますが、コンソールに "(画像への URL パス)/{{item}}" という 404 エラーが表示されます。そのため、エラーが発生しますが、画像は引き続き表示されます。
2) ライトボックスの外側をクリックすると、ライトボックスが消え、新しい画像をリロードできません。これは、閉じるボタンがないためだと思いますか?
「項目」スコープ プロパティをダイアログ テンプレートに適切にバインドしていますか? そうでない場合、正しい方法は何ですか?