Using AngularJs dynamic directives for custom view

Question

I'm using a server side generated JSON to populate a custom view using different directives with Angular 1.2.29. I have a couple of questions regarding what is the proper way a doing this considering performance and good practices.

• 5 different types of directive will be involved for about 30 items
• The JSON will stay the same about 90% and it's a bit bad to have to regenerate all the DOM elements between user tab switch.
• I want to avoid creating watches but in since I'm using 1.2.X should I consider using angular-once
• Since I'm going to reuse the same directive couple of time should I consider cloneAttachFn

function processItems(items) { angular.forEach(items, function(item) { switch(item.type) { case 'directive1': var newDirective = angular.element('<directive-one></directive-one>'); newDirective.attr('value', item.value); var compiledHtml = $compile(newDirective)(scope); element.append(compiledHtml); break; case 'directive2': var newDirective = angular.element('<directive-two></directive-two>'); newDirective.attr('value', item.value); var compiledHtml = $compile(newDirective)(scope); element.append(compiledHtml); break; } }) }

I created a Plunker to show you guys my current approach. Comments and answers are very welcome! https://plnkr.co/edit/Za4ANluUkXYP5RCcnuAb?p=preview

Answer 1

I have been through this problem many times when generating dynamic filter type functionality. Your code works but I would argue it's over engineered and not very readable. GenericItems directive isn't needed. I would try and move functionality to the view and make it clear what happens as the type changes. Here is my solution as a Plunker

Controller

<div ng-controller="appCtrl as app">
    <p>{{app.name}}</p>
    <button ng-click="app.add1()">Directive 1</button>
    <button ng-click="app.add2()">Directive 2</button>
    <button ng-click="app.remove()">Remove</button>
    <div ng-repeat="item in app.items">
      <directive-one value="item.value" ng-if="item.type==='directive1'"></directive-one>
      <directive-two value="item.value" ng-if="item.type==='directive2'"></directive-two>
    </div>
</div>

app.js

app.controller('appCtrl', function() {

  var vm = this;
  vm.items = [];

  vm.name = 'Dynamic directive test';
  vm.add1 = function() {
    vm.items.push({type: 'directive1', value: Math.random()})
  };

  vm.add2 = function() {
    vm.items.push({type: 'directive2', value: Math.random()})
  };

  vm.remove = function() {
    vm.items.pop();
  };
});

app.directive('directiveOne', function() {
  return {
    scope: {
      value: '='
    },
    restrict: 'E',
    template: '<p>d1: {{value}}</p>'
  }
});

app.directive('directiveTwo', function() {
  return {
    scope: {
      value: '='
    },
    restrict: 'E',
    template: '<p>d2: {{value}}</p>'
  }
});