AngularJS directive loaded dynamically in ng-include do not work

Question

I have a custom directive which adds some html.

myAppModule.directive('myDirective', function() {
    var linker = function(scope, element) {
        return element.html("<b>directive loaded</b>");
    };
    return {
        restrict: "E",
        rep1ace: true,
        link: linker,
        scope: false
    };
});

This directive is loaded and used in a dynamically loaded html which is included via ng-include.

<script type="text/javascript" src="dynamicscript.js"></script>
<my-directive>...</my-directive>

But it does't work. The linker-function is never called. It works if I move the dynamicscript.js script loading from the included html to the index.html.

Here is the Plunkr

Answer 1

Just use RequireJS to load the controllers, directives, and so on.

Using special plugins, CSS and HTML files can be loaded too.

Here is a great example from Ben Nadel: http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm

Answer 2

All JS files should be included in 'index.html' JS files (services, modules, controllers) loaded dynamically using ng-include will not work