Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: Angular 2, AngularJS
Войти
Регистрация
Восстановить пароль
 
DennisM
0 / 0 / 0
Регистрация: 31.05.2015
Сообщений: 35
1

Создание кастомной директивы

16.07.2015, 15:40. Просмотров 284. Ответов 0
Метки нет (Все метки)

добрый день всем!
Коллеги, помогите, пожалуйста, с таким вопросом - запрашиваю через $resource ('http://jsonplaceholder.typicode.com/photos') json объект, вывожу в представление список - картинку-миниатюру (свойство thumbnailUrl) и текст (свойство title). Свойство url объекта содержит ссылку на картинку полного размера.
Задача - создать директиву в виде атрибута каждого элемента списка - при нажатии на элемент экран затемняется и показывается по центру эта картинка в полном размере; затем при клике на любом месте экрана картинка пропадает, затемнение убирается.
! ng-click использовать нельзя !
Уперся в стенку внутри директивы... попробовал несколько ваариантов.. не идет
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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="
    </div>
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>
 
</body>
</html>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
(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', {});
        };
    
})();
Thanks a lot!!!!!!!!

Добавлено через 33 минуты
тут html чуть покосило... не обращайте внимание
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.07.2015, 15:40
Ответы с готовыми решениями:

Создание Angular директивы с несколькими HTML фрагментами
Доброго времени суток. Мне нужно создать директиву, в которой есть кнопка и модальное окно. Как...

Директивы
Всем привет! задача:кусок кода запихать в директиву и вызывать когда мне понадобиться в проекте !...

директивы
есть такой код .directive('myName', function () { return { my: 'blue', ...

Ui.router из директивы
Добрый день. в приложении создал конфиг: angular.module(&quot;LiamoApp&quot;, ) .config() Суть...

Доступ к scope из директивы
Помогите разобраться. Есть контроллер. В него приходят данные, все хорошо. function...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.07.2015, 15:40

Директивы и кастомный темплате
Есть директива, которая должна получить обьект, взять с него id, и вписать его в путь к темплейту....

Область видимости директивы
Как в этой строке template: &quot;&lt;p ng-repeat='value in arr'&gt;{{value}}&lt;/p&gt;&quot; правильно сослаться на...

Angular директивы и динамический DOM
Всем привет! Столкнулся с проблемой. В одном шаблоне со списком компаний у меня для каждой компании...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru