AngularJS从JSON的缩略图中获取模态图像
Posted
技术标签:
【中文标题】AngularJS从JSON的缩略图中获取模态图像【英文标题】:AngularJS getting the image in modal from thumbnail from JSON 【发布时间】:2017-08-28 19:44:23 【问题描述】:使用AngularJS获取JSON文件:
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "http://placehold.it/600/92c952",
"thumbnailUrl": "http://placehold.it/150/92c952"
,
并使用 ng-repeat 显示:
<div ng-repeat="image in images" class="col-xs-2 ">
<div class="thumbnail">
<img src=" image.thumbnailUrl " ng-click="open()" />
</div>
</div>
这行得通。比我将 ui.bootstrap 连接到缩略图以打开模式窗口。
控制器:
app.controller("page3Ctrl",['$scope', '$resource', '$uibModal', function ($scope, $resource,$uibModal)
var postingsResource = $resource('http://jsonplaceholder.typicode.com/photos', );
$scope.images = postingsResource.query();
$scope.open = function()
var uibModalInstance = $uibModal.open(
animation: true,
templateUrl: 'modal.html'
);
;
]);
工作正常。现在,我怎么可能从 thumbnailUrl 在模态 url 中显示特定图像?它们应该匹配。
【问题讨论】:
ng-repeat
这是一个有效的 HTML5 属性吗?还是我们根本不需要再关心?
使用ng-src
而不是src
。它将save you some 404s.
@RokoC.Buljan,它是一个自定义的 HTML 属性指令,它内置在 AngularJS 框架中并由它解释。
【参考方案1】:
如果您没有为modal
使用任何控制器,那么您可以简单地将$scope
分配为模态范围,并将所选图像分配给scope
变量并在模态模板中访问它。
var app = angular.module('app', ['ngResource','ui.bootstrap']);
app.run(function($templateCache)
$templateCache.put('modal.html', '<div><a ng-click="$close(true)" class="pull-right">× close</a><img ng-src="currentImage.url"/></div>');
);
app.controller("page3Ctrl", ['$scope', '$resource', '$uibModal', function($scope, $resource, $uibModal)
var postingsResource = $resource('http://jsonplaceholder.typicode.com/photos', );
$scope.images = postingsResource.query();
//no controller for modal
$scope.open = function(image)
$scope.currentImage = image;
var uibModalInstance = $uibModal.open(
animation: true,
scope:$scope,
templateUrl: 'modal.html'
);
;
/*
//modal has controller
$scope.open = function(image)
var uibModalInstance = $uibModal.open(
animation: true,
templateUrl: 'modal.html',
resolve:
image: function()
return image;
,
controller: function($scope, image)
$scope.currentImage = image;
);
;
*/
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.11/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<div ng-app="app" ng-controller="page3Ctrl">
<div ng-repeat="image in images.slice(0,10)" class="col-xs-2 ">
<div class="thumbnail" ng-click="open(image)">
<img ng-src=" image.thumbnailUrl " ng-click="open()" />
</div>
</div>
</div>
【讨论】:
【参考方案2】:您可以向open
函数添加一个参数,并将图像的url
传递给它。像这样:
$scope.open = function(imageUrl)
var uibModalInstance = $uibModal.open(
animation: true,
templateUrl: 'modal.html',
controller: ModalInstanceCtrl,
resolve:
imageUrl: function ()
return imageUrl;
);
所以:
<img src=" image.thumbnailUrl " ng-click="open(image.url)" />
参数也必须传递给模态控制器:
var ModalInstanceCtrl = function ($scope, $modalInstance, imageUrl)
$scope.imageUrl = imageUrl;
;
有关将值传递给模态控制器的更多详细信息:Pass parameter to modal
【讨论】:
imageUrl 返回正确的链接,但注入模态控制器会报错: app.controller('page3Ctrl',['$scope', '$resource', '$uibModal', 'imageUrl',函数 ($scope,$resource,$uibModal,imageUrl) 错误:$injector:unpr 未知提供者 如果你能创建一个 jsfiddle 或一个 plunker 或类似的东西会非常有帮助。 你在错误的地方注入了imageUrl
。将其注入模态的控制器。查看更新的答案。
已修复,但仍然不知道如何以模态显示图像。以上是关于AngularJS从JSON的缩略图中获取模态图像的主要内容,如果未能解决你的问题,请参考以下文章
使用 AngularJS 从 JSON 响应中获取图像 url