2

I have this crazy idea, I'm building an app with different contents to show, and the contents' data is from the server with websocket, also the directives for showing the data.

So I'm wondering if there is a way I could dynamically generate/register directives at runtime?

Like, I put an directive like this:

<content ng-repeat="d in data" ></content>

and then after I got the directive from the server, I could using something like this to register this:

angular.module('app').directive('content', function(){
    return {
        restrict: 'E',
        template: // some way to fetch the template
        ...
}

And then if the user enter this view, angular will be loading the directive I just registered.

Also, I've tried several ways, like 

<div ng-include="'some template'" ng-repeat="d in data"></div>

that works if all you need to do is repeat some plain html. But not if you're trying to bind some data too.

Clive DM
  • 551
  • 4
  • 13
  • Lol are you looking to generate directives or templates? For templates, you could use ui-router. For directives you can use some AMD project. It's not crazy at all. – yangli-io May 25 '15 at 02:59
  • @YangLi, thanks for the answer. **Just** to generate directives using `angular.module('app').directive('somedirective', ...)` works fine before the whole module was bootstrapped. But, I'm trying to generate one at runtime, after it was bootstrapped. I tried the code before by then, it doesn't work. Maybe it need some further tweaks? like 'compile', or 'link'? – Clive DM May 26 '15 at 00:07
  • Yeah okay, you can use an AMD package for this http://stackoverflow.com/questions/17446844/dynamic-require-in-requirejs-getting-module-name-has-not-been-loaded-yet-for-c – yangli-io May 26 '15 at 00:22
  • @YangLi yep, require js is a great module for lazy binding and stuff. But as far as I know, doesn't it require that all the js file to be lazy loaded should already be put in it's containing directory? Or it could be some dynamic scripts I just got from the server via websocket while the whole thing is running? – Clive DM May 26 '15 at 05:26
  • Hmm actually, I think I understand your question. I don't think you can compile more angular code after it's been initialized. You can definitely add more javascript and compile those but adding more directives or controllers or etc in angular may not be possible after initialization. I may be wrong. – yangli-io May 26 '15 at 05:40
  • @YangLi well it seems impossible to me, after days of searching and testing. I'll just pre-define some locally and try to use one of those for each situation. Thanks for your answer. ;-) – Clive DM May 27 '15 at 06:10
  • Are you trying to load widgets or templates? Loading widgets or functionality through angular may not be possible. But templates is not hard. – yangli-io May 27 '15 at 06:51
  • @YangLi Templates. Well, it should be easy, but when I try to load a template and bind it to a directive while, let's say when the template comes from the server, it seems not happening. The page with the directive didn't seem to replaced the directive at all. And then I tried to use `ng-include` and use the mem thing to dynamically change the page that included, it works but just with plain html, the `binding` thing and the `ng-click` thing don't work. – Clive DM May 30 '15 at 00:14

0 Answers0