Question

我有一个部分页面，显示服务器上的文件列表。我想允许用户选择一个文件并使用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');
   }
}

这里是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）当我点击灯箱外面时，它会消失，我无法重新加载新图像。我认为这是因为没有关闭按钮？

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

Answer 1

尝试使用ng-src例如：

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

它可能会克服奇怪的原因/＆gt;仍然是有效的HTML（只是不是HTML 5）

如何使用AngularUI Dialog进行灯箱

1 个答案: