add a directive to html from another directive in angularJS

Question

When I press a button, a modal shows up. In that modal i have a <template-placeholder></template-placeholder>

When the button is clicked, I do a if-check to make sure it's the correct button. If it is - then add another directive instead of the placeholder.

But I'm unable to get it to work.

Here is my directive:

.directive('modalDirective', function(){
    return {
        restrict: 'E',
        scope: {
            ctrl: '=',
            modalId: '@',
        },
        template:  ['<div id="{{modalId}}" class="modal fade" role="dialog">', 
                      '<div class="modal-dialog">',
                        '<div class="modal-content">',
                        '<div class="modal-header">',
                        '<h4 class="modal-title">Modal Header</h4>',
                        '</div>',
                        '<div class="modal-body">',
                        '<p> {{ ctrl.text }} </p>',
                        '</div>',
                        '<div class="modal-footer">',
                        '<template-placeholder></template-placeholder>',
                        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
                        '</div>',
                        '</div>', 
                        '</div>',
                        '</div>'].join(''),
        link: function(scope, element, attrs) {
            scope.$watch('modalId', function(val){
                if(val == 'protocolModal'){
                    element.find('template-placeholder').replaceWith('<test-directive></test-directive>');
                }
            });
        }
    }
})

.directive('testDirective', function(){
    return {
        restrict: 'E', 
        template: '<div>this is our other directive speaking.</div>'
    }
});

Is <template-placeholder> a directive or just a dummy element? — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jul 21, 2015 at 11:24
@NikosParaskevopoulos just a dummy element that is supposed to be swapped out with a directive. — Nilzone-
– Nilzone-, Commented Jul 21, 2015 at 11:25

Nikos Paraskevopoulos · Accepted Answer · 2015-07-21 11:25:32Z

1

You need to use $compile:

.directive('modalDirective', ['$compile', function($compile){
    ...
    link: function(scope, element, attrs) {
        scope.$watch('modalId', function(val){
            if(val == 'protocolModal'){
                element.find('template-placeholder').replaceWith($compile('<test-directive></test-directive>')(scope));
            }
        });
    }
}])

The updated fiddle: https://jsfiddle.net/L0jns64m/3/

answered Jul 21, 2015 at 11:25

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mathew Berg · Accepted Answer · 2015-07-21 11:33:11Z

1

Why watch on the modalId? You can just use an ng-if:

'<div class="modal-footer">',
'<test-directive data-ng-if="modalId == \'protocolModal\'"></test-directive>',
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
'</div>',

Here is a fiddle with it working: http://jsfiddle.net/aL0er9rv/

answered Jul 21, 2015 at 11:33

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Comments

Nevy · Accepted Answer · 2015-07-21 11:37:02Z

0

Replace template-placeholder with

<ng-if="protocolModal" test-directive></test-directive>

ng-if will take care of both compilation and destruction for you. It is quite nice.

answered Jul 21, 2015 at 11:37

Nevy

315 bronze badges

Collectives™ on Stack Overflow

add a directive to html from another directive in angularJS

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related