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

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

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);

edited May 23 '17 at 11:51

Community

1
1

answered Jul 05 '15 at 19:09

Pankaj Parkar

134,766
23
234
299

thanks. `link` and `script` are in the parent html document, not the embedded document. I think I have my link wrong. all I want to do is modularize my parent document with a bunch of embeds. I was told to use directives as tmpl templates. To that end, I moved my html into a template file and loaded it using a directive. But now my css and js no longer work inside that template module. What do I do? Thanks. – arcee123 Jul 05 '15 at 19:45
@arcee123 refer this answer http://stackoverflow.com/questions/15193492/how-to-include-view-partial-specific-styling-in-angularjs – Pankaj Parkar Jul 05 '15 at 20:31

score 0 · Answer 2 · answered Jul 05 '15 at 19:13

0

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

answered Jul 05 '15 at 19:13

user1608841

2,455
1
27
40

can you please give example? I'm not educated on $timeout in this basic movement. Thanks. – arcee123 Jul 05 '15 at 19:26

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

2 Answers2