Dynamically add a directive in AngularJS within Gridster

Question

I just started working with AngularJS but I found a small problem that I cant find out, I hope you peeps can help me.

I have imported AngularJS Gridster, a simple way to add a dynamic grid to your webpage. Now everything works and the element get succesfully loaded from the database and imported in Gridster but now I want to do the following thing. In the JSON that is retrieved from the database there is also an attribute called "directive". Now, when everything is loaded I want to add in each Gridster element the directive that is returned from the database.

<ul>
    <li gridster-item="item" ng-repeat="item in gridsterItems">
        {{ item.directive }} // Returns <clock-widget></clock-widget> and print it to the screen, but it dont run the directive and doesn't display.
    </li>
</ul>

Now it returns the right value and display the string on the screen but I want to run it directive clockWidget.

app.directive('clockWidget', function() {
return {
    replace: true,
    template: 'Yups, I am the clockwidget',
};
});

On the internet I read something about $compile but I can't find out. I hope you peeps can help me.

Thanks!

Answer 1

Yes, you need use $compile. See documentation.

Live example on jsfiddle.

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.directives = ["<directive-one></directive-one>", "<directive-two val='inputVal'></directive-two>"];
  })
  .directive('compileDirective', function($compile) {
    return {
      restrict: "E",
      replace: true,
      link: function(scope, element, attr) {
        scope.$watch(function() {
          return attr.directive;
        }, function(val) {
          element.html("");
          if (val) {
            var directive = $compile(angular.element(val))(scope);
            element.append(directive);
          }
        });
      }
    };
  })
//Directives for example
  .directive('directiveOne', function($compile) {
    return {
      replace: true,
      template: "<div>i'm directive one</div>"
    };
  })
  .directive('directiveTwo', function($compile) {
    return {
      replace: true,
      scope:{val:"="},
      template: "<div>i'm directive two with val={{val}}</div>"
    };
  })
  .directive('directiveThree', function($compile) {
    return {
      replace: true,
      scope:{val:"="},
      template: "<div>i'm directive three</div>"
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <select ng-model="selectDirective" ng-options="dir for dir in directives">
    </select>
    <input ng-model="inputVal">
    <compile-directive directive="{{selectDirective}}"></compile-directive>
    <compile-directive directive="<directive-three></directive-three>"></compile-directive>
  </div>
</div>