CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directive
Nilzone-
Nilzone-

Reputation: 2786

add a directive to html from another directive in angularJS

Fiddle here

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

Upvotes: 0

Views: 71

Answers (3)

Nevy
Nevy

Reputation: 31

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.

Upvotes: 0

Mathew Berg
Mathew Berg

Reputation: 28750

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/

Upvotes: 1

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

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/

Upvotes: 1

Related Questions