CODEWITHSUNDEEP
javascriptangularjstemplatesdynamicangularjs-directive
San
San

Reputation: 11

Changing a directive template according to data in attribute

I am trying to access an attribute - tab title from html into my directive and according to that the directive should change the html template. Below is the code HTML

 .directive('contentItem', function($compile) {
   var locationTemplate = '<div class="container"><div class="row"><div class="col-md-6 form-horizontal" style="border:1px solid"><select id="location" ng-change="detailCtlr.getLocation()" class="form-control" ng-model="detailCtlr.locSelected"><option ng-repeat="option in detailCtlr.typeArr" value="{{option.typeId}}">{{option.type}}</option></select></div></div></div>';
   var peopleTemplate = '<div class="container">klfdjsfsjldjs</div>';

   var getTemplate = function(contentType) {


     switch (contentType) {
       case 'Locations':
         template = locationTemplate;
         break;
       case 'People':
         template = peopleTemplate;
         break;

     }

     return template;
   }

   var linker = function(scope, element, attrs) {
     console.dir(scope.content);

     element.html(getTemplate(scope.content)).show();

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

   }

   return {
     //       template: function(tElement, tAttrs) {
     //           console.log("in template");
     //           console.log(tAttrs.content);
     //           console.dir(tAttrs.content);
     //            console.log("making templte");
     //     
     //         
     //            return getTemplate(tAttrs.content);
     //        },
     restrict: "E",
     replace: true,
     link: linker,
     scope: {
       content: '='
     }
   };
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<uib-tab ng-repeat="tab in tabs" select="Ctlr.getTabInfo(tab.title,$index)" active="" heading="{{tab.title}}">

  <content-item content="tab.title"></content-item>

</uib-tab>

I am being able to access the content "tab.title" in linker function however,the angularJS linked code using {{detailCtlr.getLocation()}} code doesnt work.If I directly return the html in template the code works but there is no way to get the "tab.title" value...I tried a bunch of things like changing the scope,passing an $index to identify the tab but nothing seems to be working..Any suggestions?Thanks in advance!

Upvotes: 1

Views: 800

Answers (2)

Mohamed Ali
Mohamed Ali

Reputation: 3995

It doesn't need any kind of workarounds, you can simply pass the directive template as as function injecting element and attributes, placing whatever processing you need inside it.

.directive('contentItem', function() {
   var directiveObj= {};

   directiveObj.template= function(element, attributes){

      if(attributes['contentType'] == 'Locations') 
          return locationTemplate;

      if(attributes['contentType'] == 'people') 
          return peopleTemplate;
   };

   //bla bla bla

   return directiveObject;
});

Upvotes: 0

Etse
Etse

Reputation: 1245

I think you are putting to much responsibility on one directive, if you try to split it up in multiple directives it will be much easier. One directive for the container - and then include subdirectives with the different pages, using ng-if to choose which directive to show.

The template of your directive could be something like this:

<div>
    <page-info ng-if="content == 'info'"></page-info>
    <page-about ng-if="content == 'about'"></page-about>
    <page-login ng-ig="content == 'login'"></page-login>
</div>

You would then need to create a separate directive for each page.

Upvotes: 2

Related Questions