Angular - create a directive based on a model

Question

Is it possible to turn this

[{
  compType: "special-label",
  style: {
  left: 10,
  top: 10
 },
 {
  compType: "special-image",
  style: {
  left: 10,
  top: 10
 }
 ]

into this:

 <special-label element="element"><special-label>

We tried using two directives:

1. special-element as a wrapper directive

2. special-label / special image as a specific directive

   <div class="element" ng-repeat="element in elements">
   <wix-element element="element" compType="{{element.compType}}" test="5">
   
   </wix-element>
      </div>
   

However when we try to access the compType in the template method of the special element it is yet to be parsed.

Any ideas what should we do to make it work?

Answer 1

You can use scope.$observe for this:

app.directive('wixElement', function () {
    // these should maybe be defined in a factory
    var SPECIAL_LABEL = 0,
        SPECIAL_IMAGE = 1;
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // observe changes in attribute - could also be scope.$watch
            attrs.$observe('compType', function (value) {
                switch (value) {
                    case SPECIAL_LABEL:
                        // do stuff for special-label
                        break;
                    case SPECIAL_IMAGE:
                        // do stuff for special-image
                        break;
                }
            });
        }
    });

Also, have a look at my answer here: https://stackoverflow.com/a/17087331/1008519 Disregard the passing of the variable to the controller and just look at how to access the variable in the directive.

One thing though.. I'm not sure why you want to pass styles with the object. Shouldn't you just style the elements based on classes?

Answer 2

Here's solution with limted features, starts with wix-element directive and each of the listed component types have their own directives .

I left out passing attributes like style, created simply as proof of concept.

app.directive('wixElement', function($compile) {
  return {
    restrict: 'E',
    scope: {
      component: '='
    },
    compile: function() {
      return function (scope, elem, attrs, ctrl) {
        var tagName = scope.component.compType;
        var template = '<' + tagName + ' component="component"></' + tagName + '>';

        elem.replaceWith($compile(template)(scope));
      }
    }
  }

});

app.directive('specialLabel', function() {
  return{
    restrict: 'E',
    template: '<div>{{component.text}}</div>'
  }
});

app.directive('specialImage', function() {
  return {
    restrict: 'E',
    template: '<div>{{component.text}}</div>'
  }
});

DEMO