Angular js templates do not call <script> tags. Behavior by design?

[Scott Motte]

Angularjs has been great. Is the following behavior by design?

When rendering angular js templates I find that a <script\> tag is not called. 

Here is an example simulating the behavior: http://jsfiddle.net/LEmVF/10/

As you can see, I cannot embed the stripe button inside an angular.js template. Is this something I should use a directive for?

[m48u]

I had the same problem but couldn't find a way to archieve this. Maybe it's a XSS/security issue.

But anyways it would be better design to separate templates from model functionality. In your template 

just call a method from the scope to get your functionality

http://jsfiddle.net/LEmVF/12/

Cheers

[umesh nakod]

after a long time am geeting this problem actually i want to write a directive in which template i have to use <script> tag so guys do you get any clue about this

please help me..

[Sander Elias]

Hi Umesh,

script tags are stripped from the templates as a security feature. And for good reasons. 

That does not mean you can't load scripts, it just means you can't use templates to

accomplish that goal.

What is the actual reason you think you need a script in your template? If you build a 

plunk around what you are trying to do, I can most likely provide a (couple of) alternative(s)

to you.

Regards

Sander

[Suresh]

Hi Sander,

Actually I'm facing similar issue here. I have a scenario where I have to load a script inside angular application.

I'm trying to embed google preview wizard script inside my angular application. No matter in what way i try it's just not happening. (https://developers.google.com/books/docs/preview-wizard). Any inputs on this ? 

So far I tried embedding it inside a directive, iframe, directly inside controller, and finally template (which stripes off scripts tags inside it).

[Sander Elias]

Hi Suresh,

Make an directive out of it.
Inside the directive you can check if the script is loaded, if not dynamically load the script using your script-loader of choice.
Once loaded (I would use a promise to keep track of that!) call the needed functions GBS_insertEmbeddedViewer('ISBN:0738531367',600,500) or something similar.

Regards
Sander

​

[Suresh]

Hi Sander, I tried using directives but the problem is when the script is getting rendered, it is rewriting the whole page and displaying only the icon. (It has the same effect of javascripts document.write function). 

Below is my directive. Any idea what is happening here ? Or any other approach I should try ?

<div data-embed-viewer="book.isbn"></div>

appCommonDirective.directive('embedViewer', ['$compile',function($compile) {
        return {
            restrict: 'AE',
            template: '<div></div',
            replace: true,
            scope: {
                isbn: '=embedViewer'
            },
            link: function(scope, el, attrs) {
                var rawTmpl = '<h1></h1><script type="text/javascript"> GBS_insertPreviewButtonPopup('+scope.isbn+');</script>';
                scope.$watch('isbn', function(val) {
                    if (val) {
                        var template = $compile(rawTmpl)(scope);
                        el.html(template);
                    }
                })
            }
        }
    }]);

[Sander Elias]

If you put it in a plunk, I will give you a solution.

Regards

Sander

[Penkey Suresh]

Hi, Please check this plunker http://plnkr.co/edit/PixXPav7VLvSuL6OdBpn?p=preview

There are total 4 cases in this. One is loading script (directly), through directive in the main view. Another is loading script (directly), through directive in a secondary view (Not the view where all scripts are loaded initially).  Please let me know where I'm getting it wrong. 

Thank you

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/9d-rhMiXDmg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Regards,

Penkey Suresh.

[Sander Elias]

Hi Suresh,

GBS_insertPreviewButtonPopup seems to be incompatible with AngularJS(or other frameworks for that matter!) at first sight. I don’t have the time now to dive in deeply.
However, I reviewed the documentation, and it seems to be an top-level function for the rest of the library. You can use the lower-level stuff quite well with AngularJS.

I hope this helps a bit,
Regards
Sander

​

[Penkey Suresh]

Thank you Sander. I'll look into it.

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/9d-rhMiXDmg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Regards,

Penkey Suresh.