I have an array of objects in my Angular app, each of which contains a property with some html that needs to be inserted into the html of my page. One of the objects in the array is an Amazon search widget that contains some inline javascript in a <script> tag and a reference to an Amazon script in another <script> tag. I want to insert this code into my page and have it display properly, but I think Angular is stripping out the <script> tags and I don't know how to get it to work.
Here's the code for my Angular app:
(function() {
var app = angular.module('myApp', ['ngSanitize']);
app.controller('MainController', ['$scope', '$sce', function($scope, $sce){
var objlist = [
{
name: 'amazon',
markup: $sce.trustAsHtml('\
<!-- AMAZON -->\
<div class="obj-iframe">\
<script charset="utf-8" type="text/javascript">\
amzn_assoc_ad_type = "responsive_search_widget";\
amzn_assoc_tracking_id = "xxxxx";\
amzn_assoc_link_id = "xxxxxx";\
amzn_assoc_marketplace = "amazon";\
amzn_assoc_region = "US";\
amzn_assoc_placement = "";\
amzn_assoc_search_type = "search_widget";\
amzn_assoc_width = 680;\
amzn_assoc_height = 600;\
amzn_assoc_default_search_category = "";\
amzn_assoc_default_search_key = "whatever";\
amzn_assoc_theme = "light";\
amzn_assoc_bg_color = "FFFFFF";\
</script>\
<script src="//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&MarketPlace=US">\
</script>\
</div>\
')
},
}
];
$scope.objlist = objlist;
}]);
})();
And then in my HTML I simply have:
<div ng-repeat="obj in objlist">
<div ng-bind-html="obj.markup"></div>
</div>
Using $sce.trustAsHtml() and escaping the multiline HTML helped the other objects in the list render properly in my html, but I can't get this one to work, and I know it must be because of the inline javascript and/or the reference to the script hosted with Amazon. Like I said, I've researched this at length and nothing I've tried has worked. Is it possible to inject this Amazon widget using Angular, or should I try to get it on my page another way? I should also point out that I read a few articles that said including jQuery on the page before Angular helps with injecting script tags, and I have jQuery on the page but it's still not working.