Angular modal directive - issue when having more than 1 in a page

Question

I made a modal directive for my angular app.

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'
    };
});

and the template looks like this: (modal.html)

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

Now, let's pretend we have 2 modals in a page:

<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>

Problem: I end up with 2 modals having the same class (in my example above, secondModal will be attached to 2 of my modals)

Why does this happen? I need the value of my directive to be attached to each modal because thats the only way I can open the one I want.

I know this is horrible explanation Let me know if you have any question

Edit:

I want to have 2 app-modal divs, each one having its directive value as a class attached to it. Hope it's more clear now.

I'm already able to pass the values `firstModal` and `secondModal`. At the end I need two `app-modal` having each of my directive values. — user3800799, Jul 06 '16 at 06:20
Alon Eitan - I tried, no success. But anyway, I need it to pass variables to my directive template — user3800799, Jul 06 '16 at 06:21

score 2 · Answer 1 · answered Jul 06 '16 at 06:35

2

Use an isolated scope in the directive

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

Here is a plunker I did for this https://embed.plnkr.co/UwjBIqTh5fNlAcbIs6TS/

answered Jul 06 '16 at 06:35

Srijith

1,434
9
14

you already solved the problem of having duplicated classes! thank you! I only have one problem unsolved. I tried to edit your plunker - but I don't know how to save so I'll explain: Let's wrap our first `form-group` div in the first modal with a form and when submitting, I want to alert the value of the input text there. How can I access that? (I previously relied on `'@'` for that.) I need to access my modal's text fields from my main controller – user3800799 Jul 06 '16 at 07:04

Angular modal directive - issue when having more than 1 in a page

1 Answers1