In Angular js need a way for the custom directive to handle dynamic templates with varying model names

Question

I am working on a custom directive for which I will be getting the template from controller upon tab click for compilation. The following are my template, custom directive and html code.

Controller :

var template = '';
$scope.onTabClick = function(eachTab) {

    if (eachTab.id == 1) {
        template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title1Text}}</p>     <c3-simple id="dashboard1Data" config="dashboard1Data"></c3-simple>   </div> <div class="col">   <p class="graphtitle"> {{title2Text}}</p>    <c3-simple id="dashboard2Data" config="dashboard2Data"></c3-simple>   </div> </div> ';
    }

    if (eachTab.id == 2) {
        template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title6Text}}</p>     <c3-simple id="dashboard6Data" config="dashboard6Data"></c3-simple>   </div>  <div class="col">   <p class="graphtitle"> {{title10Text}}</p>    <c3-simple id="dashboard10Data" config="dashboard10Data"></c3-simple>   </div> </div> ';
    }

    if (eachTab.id == 3) {
        template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title16Text}}</p>     <c3-simple id="dashboard16Data" config="dashboard16Data"></c3-simple>   </div>  <div class="col">   <p class="graphtitle"> {{title4Text}}</p>    <c3-simple id="dashboard4Data" config="dashboard4Data"></c3-simple>   </div> </div> ';
    }


}

My Custom Directive :

app.directive('customCharts', ['$compile', function($compile) {
    return {
        restrict: 'EA',
        scope: {
            dashboard1Data: '=',
            title1Text: '=',
            dashboard2Data: '=',
            title2Text: '=',
            template: '='
        },
        link: function(scope, element, attrs) {
            scope.$watch('templatedyn', function() {
                var parent = angular.element(document.querySelectorAll('.customChartsDiv')) // DOM element where the compiled template can be appended
                var linkFn = $compile(scope.template);
                var content = linkFn(scope);
                parent.append(content);
            });
        }
    }

}]);

In jsp page I have :

<div class="customChartsDiv">

    <div custom-charts dashboard1-data="dashboard1Data" title1-text="title1Text" dashboard2-data="dashboard2Data" title2-text="title2Text" template="template"></div>

</div>

My custom directive is working fine and displaying charts properly when in $scope.onTabClick function, if eachTab.id == 1 condition is satisfied. How can I make directive generic so that it will work even if the eachTab.id == 2 or eachTab.id == 3 conditions are satisfied?

you mean now it works only when eachTab.id == 1 ? and did not work on other cases ? — Narek Mamikonyan, Feb 26 '15 at 05:58
are you tested is eachTab.id coming with other value , for example 2 and it not working ? — Narek Mamikonyan, Feb 26 '15 at 06:43
Yes, when eachTab.id == 2 or eachTab.id == 3, I am getting undefined error at line var linkFn = $compile(scope.template); — Madasu K, Feb 26 '15 at 06:56

score 0 · Answer 1 · answered Feb 26 '15 at 07:14

may be it can help

   var template = '';
    $scope.onTabClick = function(eachTab) {
    eachTab = parseInt(eachTab, 10);
        if (eachTab.id === 1) {
            template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title1Text}}</p>     <c3-simple id="dashboard1Data" config="dashboard1Data"></c3-simple>   </div> <div class="col">   <p class="graphtitle"> {{title2Text}}</p>    <c3-simple id="dashboard2Data" config="dashboard2Data"></c3-simple>   </div> </div> ';
        }

        else if (eachTab.id === 2) {
            template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title6Text}}</p>     <c3-simple id="dashboard6Data" config="dashboard6Data"></c3-simple>   </div>  <div class="col">   <p class="graphtitle"> {{title10Text}}</p>    <c3-simple id="dashboard10Data" config="dashboard10Data"></c3-simple>   </div> </div> ';
        }

        else if (eachTab.id === 3) {
            template = ' <div class="innerChartsDiv">  <div class="col">  <p class="graphtitle"> {{title16Text}}</p>     <c3-simple id="dashboard16Data" config="dashboard16Data"></c3-simple>   </div>  <div class="col">   <p class="graphtitle"> {{title4Text}}</p>    <c3-simple id="dashboard4Data" config="dashboard4Data"></c3-simple>   </div> </div> ';
        }
       else {
            template = '<div>default template</div>'
      }


    }

If condition is perfectly executing in my code there no problem, all the problem is coming with (let say eachTab.id == 3 is satisfied), then the template has config="dashboard16Data" and config="dashboard4Data" but in my link function I have only dashboard1Data and dashboard2Data, then it is giving undefined error. Shall I need to make any further clarification on this. — Madasu K, Feb 26 '15 at 08:31
let say eachTab.id == 1 is satisfied, then the template has config="dashboard1Data" and config="dashboard2Data" and in my link function I already have dashboard1Data and dashboard2Data so it is working perfectly well. I hope I made it clear. — Madasu K, Feb 26 '15 at 08:33
Sure but please see http://stackoverflow.com/questions/28690391/unable-to-view-plunker-results?noredirect=1#comment45773778_28690391. The c3 directives are not running here, will update here the soon plunker issue is resolved. I am not that much familiar using JSFiddle or Codepen. — Madasu K, Feb 27 '15 at 08:36

score -1 · Answer 2 · answered Feb 26 '15 at 06:23

-1

U will try to use scope.apply() inside link function..

link: function(scope, element, attrs) {
            scope.$watch('templatedyn', function() {
                var parent = angular.element(document.querySelectorAll('.customChartsDiv')) // DOM element where the compiled template can be appended
                var linkFn = $compile(scope.template);
                var content = linkFn(scope);
                parent.append(content);

                scope.apply();  //add like this
            });
        }

Im not sure about this,otherwise use ng-switch and ng-include combination for ur scenario..

answered Feb 26 '15 at 06:23

Ravi Babu Karikati

262
2
10

1

I am not clear about your answer. do you mean if I put scope.apply() it will work even if eachTab.id == 2 or eachTab.id == 3 also? When eachTab.id == 1, it is working fine even without scope.apply(). – Madasu K Feb 26 '15 at 06:29
Do you mean to say using `scope.apply();` will make logic generic? – Pankaj Parkar Feb 26 '15 at 07:22

In Angular js need a way for the custom directive to handle dynamic templates with varying model names

2 Answers2