how to run javascript and css in a angular directive output?

Question

I have a angular directive:

app.directive('templater', function() {
  return{
    restrict: 'E',
    templateUrl: '../../tmpl/themer.html',
    link: function(scope, element, attrs){
       // execute metisMenu plugin
        setTimeout(function(){
            $(element).templater();
        }, 1);
    }
  }
});

The intent is to push the html from themer.html into a main page.

Right now inside my my_profile.html I have the tag <templater></templater> .

Now, the html displays perfectly, however the css and js are non-operational. THe css tags in the template referenced by the directive affect and are affected by the same js and css files associated with the parent document.

How do I tell the directive to enforce the rules of the parent file on the inserted file?

Thanks

Answer 1

You will not load css & js files from the partial view, as the link & script tag will not loaded. Partial will only load the html from it. If you want to make them working refer this answer

Side Note

You should $timeout instead of setTimeout , that will ensure your angular element has updated with binding on html.

   // execute metisMenu plugin
    $timeout(function(){
        $(element).templater();
    }, 1);

Answer 2

Use $timeout of angular instead of the setTimeOut. Inject the $timeout dependency in directive