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}} />

我有两点不明白：

1) 我在正确选择的第一张图片上看到了一个灯箱，但控制台给出了 404 错误，获取“（图片的 URL 路径）/{{item}}”。所以我得到一个错误，但图像仍然出现。

2）当我在灯箱外点击时，它消失了，我无法重新加载新图像。我认为这是因为没有关闭按钮？

我是否将“项目”范围属性正确绑定到对话框模板中？如果没有，正确的方法是什么？

4

1 回答 1

0

尝试使用 ng-src 例如：

<img ng-src="{{item}}>

它可能会克服怪异，因为 /> 仍然是有效的 html（只是不是 html 5）

于 2014-02-04T09:52:20.203 回答