Question

请帮助，有这样的问题 - 我通过$ resource（'http://jsonplaceholder.typicode.com/photos'）json对象请求，在视图中呈现list-picture-thumbnail（属性'thumbnailUrl'）和text（属性'title' ）。对象属性'url'是全尺寸图片的参考。任务 - 创建指令作为每个列表元素的属性 - 当我们点击元素时，屏幕变暗，全尺寸图片应显示在屏幕的中心;然后，当我们点击屏幕的任何位置时，应隐藏全尺寸图片。！不允许使用ng-click！

(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')
		.factory("picturesService", ['$resource', picturesService]);

		function picturesService($resource) {
			return $resource('http://jsonplaceholder.typicode.com/photos', {});
		};
	
	angular.module('pictures')
		.directive('showFull', ['$document', showFull]);

		function showFull($document) {
			return {
				link: ????????????????? 
			};
		};
	
		
})();

<!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>
				<img src='{{pict.thumbnailUrl}}' /> <br> {{pict.title}}
			</li>
		</ul>
	</div>
</div>

</body>
</html>

非常感谢!!!

angularjs中的自定义指令，不使用ng-click

0 个答案: