Is it possible to create a dynamic directive in angularjs?

Question

Let me first post the explanation of what I am trying to accomplish with broken-pseudocode:

// controllers.js
angular.module('myApp.controllers', []).
  controller('MyCtrl1', [function() {
     var template = '<div my-directive></div>';
     var div = $("#view1").append(template);
     var code = http.get('/dynamic-code-for-directive');
     angular.module('myApp.directives').directive(eval(code));

  }])

// Index.html
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
  <ul class="menu">
    <li><a id="view1" href="#/view1">view1</a></li>       
  </ul>
</body>
</html>

// code.js returned by "GET /dynamic-code-for-directive"
function(scope, element){ $("#view1").append("Hello World");

Explanation

Basically I want the server to provide the definition for the directive, and then generate one on the fly. The problem, it seems, is with the append call above --- it does not recognize the template as the directive, so the directive code never gets called.

Has anyone ever tried to accomplish anything similar to this?

Please, select best answer if you got your answer. :)

Wawy
– Wawy

2014-03-14 15:35:51 +00:00
Commented Mar 14, 2014 at 15:35 — Wawy
– Wawy, Commented Mar 14, 2014 at 15:35

Rishul Matta · Accepted Answer · 2014-03-14 14:04:51Z

1

try doing it in the following order

 var code = http.get('/dynamic-code-for-directive');
 angular.module('myApp.directives').directive(eval(code)); //ie adding the directive definition

then make a template but one step that you are missing is COMPILING it

     $scope.template = $compile(<div my-directive></div>')($scope);

then append it!

angular.element("#view1").append($scope.template);

please revert back with the results

answered Mar 14, 2014 at 14:04

Rishul Matta

3,5035 gold badges26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andriy Drozdyuk Over a year ago

Where do I get the $compile from? I.e. I can't inject it into controller for some reason.

Rishul Matta Over a year ago

your controller also has $scope missing in it write [function($scope,$compile)]

Andriy Drozdyuk Over a year ago

I did, but $compile is undefined at that point. Does it require some kind of module dependency, do you know?

Rishul Matta Over a year ago

look out for different ways of defining your module i am sure there is something wrong in the way you are defining your angular module.Controllers have access to $compile or it can also be an issue with your angular js version please upgrade to the latest one.

Wawy · Accepted Answer · 2014-03-14 14:53:48Z

0

There is some things you are doing wrong, you are doing DOM manipulation inside a controller, which is wrong and not an appropriate use of angularjs.

To use $compile you need to be inside a directive. It would look something like:

app.directive('directiveCreator', function($compile, $http) {
  return function(scope, element, attrs) {
    var template = '<div my-directive></div>';
    element.html(template);
    var code = $http.get('/dynamic-code-for-directive');
    app.directive('myDirective', function() {
       var link = eval(code);
      return {
        link : link
      }
    }
    $compile(element.contents())(scope);
  }
  );
};

There might be mistakes but it would be something like that.

answered Mar 14, 2014 at 14:53

Wawy

6,2692 gold badges26 silver badges24 bronze badges

4 Comments

Andriy Drozdyuk Over a year ago

So I need a directive to create a directive? :-) But I don't know ahead of time how many directives there will be! Hm...I'll have to give it more thought.

Andriy Drozdyuk Over a year ago

But I don't know ahead of time how many directives I will need. So I will need directiveCreator1, directiveCreator2, etc.. But if I need to create THESE directives dynamically, I am back to square one: how do I create directives on the fly?

Wawy Over a year ago

You only need one directiveCreator. What does tell you how many directives you need?

Andriy Drozdyuk Over a year ago

The server will. For example, imagine application with dynamic number of tabs at the top. Clicking on the tab fetches a dynamic template and a "directive" that will know how to handle the html in that template. So, one template may contain, say a table (with sorting and other custom behavior), while another --- some sort of form. The point is that each tab's content would be defined via a template dynamically loaded from the server, and it's behavior --- by a dynamically loaded code (which I was thinking would be possible to write as a directive). Hope this is not too confusing!

Collectives™ on Stack Overflow

Is it possible to create a dynamic directive in angularjs?

Explanation

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Explanation

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related