Adding a dynamic directive inside another directive template in AngularJS

Question

I want to add dynamic directive inside another directive tempalte. As you see I want to add another directive inside a directive template How do add those dynamic directive there

Please help

return {
restrict: 'AE',
require :'^awkGrid',
templateUrl: 'views/shutter.html',
link : function(scope, element, attr, controllerInstance){

    //Set the header
    scope.items = [];
    angular.forEach(scope.rowData, function(value, key) {

        var obj = {
            key : key,
            value : value
        };


        template = <country name="'+value.country+'" id="'+key+'"></country>;
        scope.items.push(template);
    });
};
//Inside shutter.html file
 <div data-ng-repeat="item in items" class="ag-row action-row"
 ng-class-odd="'ag-row-even'"
 ng-class-even="'ag-row-odd'"
 ng-class="{'ag-row-selected':$index == selectedRow}"
 ng-click="setClickedRow($index,$event)">
<div class="ag-cell">
            {{item}} //Not working ,Prinitng the string
    <country name="india" id="-1"></country> //Working
</div>

score 0 · Answer 1 · edited Jul 16 '19 at 10:27

0

You must have to recompile your directive. Add folowing code at the end of link function:

$compile(element.contents())(scope);

Answer is in here.

Of course, you have to add service $compile to your directive as a dependency.

edited Jul 16 '19 at 10:27

Prashant Pokhriyal

3,727
4
28
40

answered Sep 27 '15 at 07:30

Niezborala

1,857
1
18
27

not working it is still showing as string – Prasenjit Chakroborty Sep 27 '15 at 07:35
1

Can you put your solution to jsfiddle.net? – Niezborala Sep 27 '15 at 07:38
I am afraid that is not possible – Prasenjit Chakroborty Sep 27 '15 at 07:41
As you can see this tag is working but when I attach it to a scope then it is not compiling – Prasenjit Chakroborty Sep 27 '15 at 07:46
Maybe try to make a join on `scope.items.join('')`, then append it to directive content and then try to recompile. – Niezborala Sep 27 '15 at 07:48
var link = function(scope, elem, attrs){ scope.country = ''; $compile(elem.contents())(scope); } this also not working in html {{country}} – Prasenjit Chakroborty Sep 27 '15 at 07:51

hally9k · Answer 2 · 2015-09-27T09:07:16.817

0

To dynamically switch out the entire template of a directive you have to set the element's html to the desired new template and then pass the element's contents into $compile to bind it with the $scope.

element.html('<h1>Dynamic Content</h1>').show();

$compile(element.contents())($scope);

This should all be defined in the link function of the directive in question.

edited Sep 27 '15 at 09:07

answered Sep 27 '15 at 08:56

hally9k

2,423
2
25
47

Adding a dynamic directive inside another directive template in AngularJS

2 Answers2