Угловая модальная директива - проблема, когда на странице больше 1

Question

Угловая модальная директива - проблема, когда на странице больше 1

0

Я сделал модальную директиву для своего углового приложения.

modal-directive.js

'use strict';

backyApp.directive('appModal', function() {
    return {
        restrict: 'A',
        transclude: true,
        link: function($scope, elem, attr){
            $scope.modalClass = attr.appModal;
        },
        scope: '@',
        templateUrl: './components/modal/modal.html'
    };
});

и шаблон выглядит следующим образом: (modal.html)

<!-- Modal -->
<div class="app-modal" ng-class="modalClass">
    <div ng-transclude></div>            
</div>

Теперь давайте предположим, что у нас есть 2 модала на странице:

<div app-modal="firstModal">
    <div class="form-group">
            <input type="text"  />
            <input type="submit" value="Submit" />
        </div>
    </div>
</div>

<div app-modal="secondModal">
    <div class="form-group">
            <input type="text"  />
            <input type="submit" value="Submit" />
        </div>
    </div>
</div>

Проблема: у меня есть 2 модала, имеющих один класс (в моем примере выше, secondModal будет прикреплен к secondModal моим модалам)

Почему это происходит? Мне нужно, чтобы моя директива была привязана к каждому модальному моменту, потому что это единственный способ открыть тот, который я хочу.

Я знаю, что это ужасное объяснение. Дайте мне знать, если у вас есть какие-либо вопросы

Редактировать:

Я хочу иметь 2 app-modal divs, каждый из которых имеет свою директивную ценность как класс, прикрепленный к нему. Надеюсь, теперь это станет более ясным.

user3800799 06 июль 2016, в 09:12

Источник

0

Что такое scope: '@', ,? Попробуйте удалить его
Alon Eitan 06 июль 2016, в 06:17
0

Я уже в состоянии передать значения firstModal и secondModal . В конце мне нужно два app-modal имеющие каждое из значений моей директивы.
user3800799 06 июль 2016, в 06:20
0

Алон Эйтан - попробовал, безуспешно. Но в любом случае мне нужно передать переменные в мой шаблон директивы
user3800799 06 июль 2016, в 06:21
0

Есть ли шанс для jsfiddle ?
Alon Eitan 06 июль 2016, в 06:23
0

Ниже вы можете увидеть вантуз, спасибо!
user3800799 06 июль 2016, в 07:07

Показать ещё 3 комментария

Теги:

angularjs

directive

1 ответ

Ещё вопросы

Что такое scope: '@', ,? Попробуйте удалить его
Я уже в состоянии передать значения firstModal и secondModal . В конце мне нужно два app-modal имеющие каждое из значений моей директивы.
Алон Эйтан - попробовал, безуспешно. Но в любом случае мне нужно передать переменные в мой шаблон директивы
Ниже вы можете увидеть вантуз, спасибо!

Srijith · Answer 1 · 2016-07-06T05-08-00.000Z

Используйте изолированную область действия в директиве

backyApp.directive('appModal', function() {
 return {
    restrict: 'A',
    transclude: true,
    link: function($scope, elem, attr){
        $scope.modalClass = attr.appModal;
    },
    scope: {},
    templateUrl: './components/modal/modal.html'
 };
});

Вот плункер, который я сделал для этого https://embed.plnkr.co/UwjBIqTh5fNlAcbIs6TS/

Вы уже решили проблему дублирования классов! благодарю вас! У меня есть только одна нерешенная проблема. Я пытался отредактировать ваш планкер - но я не знаю, как сохранить, поэтому я объясню: давайте обернем наш первый div form-group в первый модал формой, и при отправке я хочу предупредить значение ввода текст там. Как я могу получить доступ к этому? (Я ранее полагался на '@' для этого.) Мне нужно получить доступ к текстовым полям моего модального режима из моего основного контроллера