добрый день всем!
Коллеги, помогите, пожалуйста, с таким вопросом - запрашиваю через $resource ('http://jsonplaceholder.typicode.com/photos') json объект, вывожу в представление список - картинку-миниатюру (свойство thumbnailUrl) и текст (свойство title). Свойство url объекта содержит ссылку на картинку полного размера.
Задача - создать директиву в виде атрибута каждого элемента списка - при нажатии на элемент экран затемняется и показывается по центру эта картинка в полном размере; затем при клике на любом месте экрана картинка пропадает, затемнение убирается.
! ng-click использовать нельзя !
Уперся в стенку внутри директивы... попробовал несколько ваариантов.. не идет
[html]<!DOCTYPE html>
<html ng-app='pictures'>
<head>
<title>NG</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-resource.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div id='pictures-list' ng-controller='PicturesController as pictures'>
<ul class="list-group">
<li class="list-group-item" ng-repeat='pict in pictures.pictures' show-full ng-controller='ShowFullController as showfull'>
<img src='{{pict.thumbnailUrl}}' /> <br> {{pict.title}}
</li>
</ul>
</div>
</div>
</body>
</html>[html]
(function() {
angular.module('pictures', ['ngResource']);
angular.module('pictures')
.controller("PicturesController", ['picturesService', PicturesController]);
function PicturesController(picturesService) {
var vm = this;
vm.pictures = picturesService.query();
};
angular.module('pictures')
.directive('showFull', showFull);
function showFull() {
return {
restrict: 'A',
controller: function() {
????????????????????????????????????????????????
},
controllerAs: 'showfull'
};
};
angular.module('pictures')
.factory("picturesService", ['$resource', picturesService]);
function picturesService($resource) {
return $resource('http://jsonplaceholder.typicode.com/photos', {});
};
})();
Спасибо за помощь!
