0

サーバー上のファイルのリストを表示するページの一部があります。ユーザーがファイルを選択して、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) ライトボックスの外側をクリックすると、ライトボックスが消え、新しい画像をリロードできません。これは、閉じるボタンがないためだと思いますか?

「項目」スコープ プロパティをダイアログ テンプレートに適切にバインドしていますか? そうでない場合、正しい方法は何ですか?

4

1 に答える 1