I'm creating a Angular App which makes an ajax call to a Drupal CMS system to get some content. Some of this content includes widgets from Facebook, Twitter, Instagram and Youtube.
The ajax call is done with a postsController and postsService.
I'm having trouble getting these social media widgets to render correctly. I've got them to render correctly when some one goes directly to the page with the widgets but if they change the route (page view) the widgets won't load. I believe this is because the script the API uses only runs on the page load event.
At first angular didn't render the widgets at all but I did two things to get it working.
I put the CDN link to the API javascript in the head for wach API e.g. /platform.twitter.com/widgets.js
I made angular re-compile the data I fetched from Drupal once it changed with a custom directive I named compileAjax
What can I do to get these to render when the user changes view/route?
Below is a screenshot and sample of the code in a html doc in which the issue is replicated in a single html doc. The widgets render correctly on page load but not when you click one of the Go to Page links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-sanitize.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-route.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script>
var app = angular.module('app', ['ngSanitize','ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/page1', {
controller: 'postsController as postsCtrl',
templateUrl: 'page1.htm'
}).when('/page2', {
controller: 'postsController as postsCtrl',
templateUrl: 'page2.htm'
})
.otherwise({ redirectTo: '/page1' });
});
app.controller('postsController', ['postsService',function(postsService) {
var postsCtrl = this;
postsCtrl.test = 'this is an expression from the controller'
var promise = postsService.getPost(1);
promise.then(function(data) {
postsCtrl.data = data.data;
// I can't access the API on SO so am replicating what I would get from it here.
postsCtrl.twitter = "<div data-oembed-url=\"https:\/\/twitter.com\/NatGeo\/status\/811610711671656448\">\n<div style=\"max-width:320px;margin:auto;\">\n<blockquote align=\"center\" class=\"twitter-tweet\">\n<p dir=\"ltr\" lang=\"en\" xml:lang=\"en\">Polar bears are just one of the animals that will benefit from President Obamas\u00a0recent ban on oil drilling <a href=\"https:\/\/t.co\/MX4ZnX7TNw\">https:\/\/t.co\/MX4ZnX7TNw<\/a><\/p>\n\u2014 National Geographic (#NatGeo) <a href=\"https:\/\/twitter.com\/NatGeo\/status\/811610711671656448\">December 21, 2016<\/a><\/blockquote>\n<script async=\"\" charset=\"utf-8\" src=\"\/\/platform.twitter.com\/widgets.js\"><\/script><\/div>\n<\/div>";
postsCtrl.facebook = "<div data-oembed-url=\"https:\/\/www.facebook.com\/natgeo\/posts\/10154212815083951\">\n<div id=\"fb-root\">\u00a0<\/div>\n<script>\n<!--\/\/--><![CDATA[\/\/ ><!--\n(function(d, s, id) {\n var js, fjs = d.getElementsByTagName(s)[0];\n if (d.getElementById(id)) return;\n js = d.createElement(s); js.id = id;\n js.src = \"\/\/connect.facebook.net\/en_US\/sdk.js#xfbml=1&version=v2.3\";\n fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));\n\/\/--><!]]>\n<\/script><div class=\"fb-post\" data-href=\"https:\/\/www.facebook.com\/natgeo\/posts\/10154212815083951\" data-width=\"550\">\n<blockquote cite=\"https:\/\/www.facebook.com\/natgeo\/posts\/10154212815083951\" class=\"fb-xfbml-parse-ignore\">\n<p>Inhumane and unsafe, snake wine is often made by drowning a live snake in alcohol. Before you purchase a gift abroad, here are a few things to know.<\/p>\nPosted by <a href=\"https:\/\/www.facebook.com\/natgeo\/\">National Geographic<\/a> on\u00a0<a href=\"https:\/\/www.facebook.com\/natgeo\/posts\/10154212815083951\">Wednesday, December 21, 2016<\/a><\/blockquote>\n<\/div>\n<\/div>"
postsCtrl.instagram = "<div data-oembed-url=\"https:\/\/www.instagram.com\/p\/BOTfVSFDgn-\/?taken-by=natgeo&hl=en\">\n<div style=\"max-width:320px;margin:auto;\"><!-- You're using demo endpoint of Iframely API commercially. Max-width is limited to 320px. Please get your own API key at https:\/\/iframely.com. -->\n<blockquote class=\"instagram-media\" data-instgrm-version=\"7\" style=\" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\">\n<div style=\"padding:8px;\">\n<div style=\" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;\">\n<div style=\" background:url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC\/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5\/P8\/t9FuRVCRmU73JWlzosgSIIZURCjo\/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI\/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf\/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;\">\u00a0<\/div>\n<\/div>\n\n<p style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;\"><a href=\"https:\/\/www.instagram.com\/p\/BOTfVSFDgn-\/\" style=\" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;\" target=\"_blank\">A photo posted by National Geographic (#natgeo)<\/a> on <time datetime=\"2016-12-22T03:35:07+00:00\" style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\">Dec 21, 2016 at 7:35pm PST<\/time><\/p>\n<\/div>\n<\/blockquote>\n<script async=\"\" defer=\"defer\" src=\"\/\/platform.instagram.com\/en_US\/embeds.js\"><\/script><\/div>\n<\/div>\n\n<p>\u00a0<\/p>";
postsCtrl.youtube = "<div data-oembed-url=\"https:\/\/youtu.be\/G51LtqmZKto\">\n<div style=\"max-width:320px;margin:auto;\"><!-- You're using demo endpoint of Iframely API commercially. Max-width is limited to 320px. Please get your own API key at https:\/\/iframely.com. -->\n<div>\n<div style=\"left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;\"><iframe allowfullscreen=\"\" frameborder=\"0\" src=\"https:\/\/www.youtube.com\/embed\/G51LtqmZKto?wmode=transparent&rel=0&autohide=1&showinfo=0&enablejsapi=1\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\" tabindex=\"-1\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<p>\u00a0<\/p>\n<\/div>\n \n<\/div>"
postsCtrl.slider = "<div class=\"slick-slider\">\n \n <div>Service Slide 1<\/div>\n \n <div>Service Slide 2<\/div>\n \n <div>Service Slide 3<\/div>\n \n <\/div>";
});
}]);
app.service("postsService", function($http, $q) {
function getPost(postsId) {
var deferred = $q.defer()
var url = 'https://jsonplaceholder.typicode.com/albums/' + postsId;
$http({
method: 'GET', // GET OPTIONS
cache: true,
url: url,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}).then(function(response) {
//your code when success
deferred.resolve(response);
}, function(response) {
//your code when fails
deferred.reject(response);
});
return deferred.promise;
}
this.getPost = getPost;
});
app.directive('compileAjax', function($compile) {
return {
restrict: 'A',
replace: true,
link: function(scope, elem, attrs) {
scope.$watch(attrs.compileAjax, function(html) {
elem[0].innerHTML = html;
$compile(elem.contents())(scope);
});
}
}
});
app.directive('slickSlider', function() {
return {
restrict: 'C',
link: function(scope, elem, attrs) {
$(elem).slick({
// settings
});
}
}
});
</script>
<script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"
async></script>
<script async="" defer="defer" src="//platform.instagram.com/en_US/embeds.js"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body>
<body ng-app="app" ng-controller="postsController as postsCtrl">
<script type="text/ng-template" id="page1.htm">
<h2>You're on Page 1</h2>
Go to page 1
Go to page 2
<div compile-ajax="postsCtrl.twitter"></div>
<div compile-ajax="postsCtrl.facebook"></div>
<div compile-ajax="postsCtrl.instagram"></div>
<div compile-ajax="postsCtrl.youtube"></div>
<div compile-ajax="postsCtrl.slider"></div>
</script>
<script type="text/ng-template" id="page2.htm">
<h2>You're on Page 2</h2>
Go to page 1
Go to page 2
<div compile-ajax="postsCtrl.twitter"></div>
<div compile-ajax="postsCtrl.facebook"></div>
<div compile-ajax="postsCtrl.instagram"></div>
<div compile-ajax="postsCtrl.youtube"></div>
<div compile-ajax="postsCtrl.slider"></div>
</script>
<div ng-view></div>
</body>
</body>
</html>
You need to manually initialize the javascript for the embedded widgets after loading them, since the widgets are being added after page load and therefore not being initialized.
For Twitter:
twttr.widgets.load();
If content is dynamically inserted into a page (such as lazy-loading content or using a pushState technique to navigate between articles) it’s necessary to request Twitter’s widgets JavaScript scan for new buttons and widgets using the twttr.widgets.load() function.
For Instagram:
instgrm.Embeds.process();
If you want to load the library separately from the HTML code, you can call the oEmbed endpoint with the omitscript parameter. This is useful for websites that want to handle the loading of the embeds.js script by themselves. To manually initialize the embed code, you can then call the JavaScript function instgrm.Embeds.process().
For Facebook:
FB.XFBML.parse();
You can use this function to re-render social plugins using either the XFBML syntax (e.g. <fb:like>) or the HTML5 syntax (e.g. <div class="fb-like">)
You'll have to track down the init code for the other social media embeds...
Compiling the html doesn't make any sense unless there are specific angular bindings/directives in the html that you want to pick up.
Here's a basic demo.
You can try something like this (via $sce) to insert html via variable, but you must really be sure that you trust your source.
app.directive('compileAjax', function($sce) {
return {
restrict: 'A',
replace: true,
template: '<span ng-bind-html="trustedHtml"></span>',
link: function(scope, elem, attrs) {
scope.trustHtml = '';
scope.$watch(attrs.compileAjax, function(html) {
scope.trustedHtml = $sce.trustAsHtml(html)
});
}
}
});
Related
i am trying to implement block-ui into our angular application on an element by element basis. (everything is included, referenced and injected correctly)
We have been trying to implement
block-ui-pattern
with no success.
our $http request is :-
$http.get('/user/123/GetUserAddress/').then(function (data) {
and our block-ui-pattern is :-
< div block-ui block-ui-pattern="/^user\/123\/GetUserAddress\$/">
{{address}}
</div>
This seems to match the documentation, but is failing to work. Am i missing something fundamental?
Our application exposes an isloading flag. initially set to true, and when the $http promise returns, sets this to false.. I realize that it is not in the documentation, however, Is there a way to set
< div block-ui="isloading"></div>
Post by Parash Gami pointed me in the right direction.
I actually ended up writing a custom directive that wraps block-ui
var myBlocker = angular.module('app.Angular.Directive.myBlocker ', []);
myBlocker.directive('myBlocker ', ['$compile', function ($compile) {
return {
restrict: 'A',
scope :{
blockId: '#id',
block: '=',
},
controller: ['$scope', 'blockUI', function ($scope, blockUI) {
var myBlock = blockUI.instances.get($scope.blockId);
$scope.$watch('block', function (newValue, oldValue) {
if ($scope.block === true)
{
myBlock.start()
}
else {
myBlock.stop()
}
});
}],
link: function link(scope, element, attrs) {
element.attr('block-ui', scope.blockId);
element.attr('style', 'min-height:200px;');
element.removeAttr("my-blocker");
element.removeAttr("data-my-blocker");
$compile(element)(scope);
}
};
}]);
This allows me to now simply add the directive to an element
< div id="myId" my-blocker block="loading">
Please check sample code. Just include one CSS and one JS of blockUI and add dependency blockUI, use blockUI.start() method to show loader and use blockUI.stop() method to hide loader. Following example hide loader after 2 seconds. Use it as per your requirement.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://angular-block-ui.nullest.com/angular-block-ui/angular-block-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="http://angular-block-ui.nullest.com/angular-block-ui/angular-block-ui.js"></script>
</head>
<body ng-app="app.user">
<div ng-controller="tempController">
</div>
</body>
</html>
<script type="text/javascript">
var app = angular.module('app.user',['blockUI']);
app.controller('tempController', function(blockUI,$timeout)
{
blockUI.start();
$timeout(function()
{
blockUI.stop();
},2000)
});
</script>
This question is more theoretical than practical but I have to ask it as a friend had a similar problem and I couldn't answer this for him.
I have a modal window that I use my extending the $modal object from AngularJS ui-bootstrap. Now when I open a modal I want to check if a class is present in the DOM (for no real reason, but I want to know if it is there). The class is determined in the service I created using $modal (see the options object). When I try and find the class using document.querySelectorAll('.photo-modal').length; I return a zero however I can see the class in the DOM when using Chrome Dev tools and the class is applied. My friends problem was similar but they could find the class originally but after closing the Modal window they would return a null or zero value. Look at this example. I open a modal window and set a 'window-class' property. The class is there but JavaScript cannot find it. I have tried using $timeout, a DOM traverse function but nothing returns the existence of my class in the DOM. Look at this example and notice the console.
angular.module('modalStuff', ['ui.bootstrap'])
.controller('MainCtrl', ['$scope', 'ModalService', function ($scope, ModalService) {
$scope.openModal = function () {
ModalService.profilePic();
};
}])
.factory('ModalService', ['$modal', function ($modal) {
var modal = angular.copy($modal);
modal.profilePic = function ( ) {
var options = {
template:'<div silly-directive>Content of the template.</div>',
windowClass: 'photo-modal'
};
return modal.open(options);
};
return modal;
}])
.directive('sillyDirective', [function () {
var findUpDom = function (elem, cssClassName) {
if (elem.classList.contains(cssClassName)) {
return elem;
} else {
while (elem.parentNode) {
elem = elem.parentNode;
if (elem && elem.classList.contains(cssClassName)) {
return true;
}
}
return false;
}
};
return {
link: function (scope, element) {
var myClass= document.querySelectorAll('.my-class').length;
var modalClass= document.querySelectorAll('.photo-modal').length;
console.log(myClass, modalClass);
//console.log(findUpDom(element[0],'photo-modal')); // Returns an error as undefined
}
};
}]
);
body {
font-family: "Comic Sans MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: aliceblue;
}
.photo-modal {
background-color: blue;
}
.my-class {
background-color: lightBlue;
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>JS Bin</title>
</head>
<body data-ng-app="modalStuff" data-ng-controller="MainCtrl">
<div class="my-class">
<button data-ng-click="openModal()">Open Me</button>
</div>
</body>
Now can anyone explain to me why the css class cannot be found? I also have the example here in a JSBin: https://jsbin.com/nuxipo/edit?html,css,js,console,output
I created a directive which makes elements resize automatically according to percents of window. But there are still problems I can't solve.
Here are the files:
autoresize.js:
angular.module('autoresize', [])
.directive('autoresize', function() { return {
scope:{theId:'#id', theClass:'#class', wFactor:'#w', hFactor:'#h'},
link: function(scope, elem, attrs) {
scope.onResize = function() {
if(scope.hFactor != 'w')
{
scope.height = Math.floor($(window).innerHeight()*scope.hFactor);
}
if(scope.wFactor != 'h')
{
scope.width = Math.floor($(window).innerWidth()*scope.wFactor);
}
if(scope.hFactor == 'w')
{
scope.height = scope.width;
}
if(scope.wFactor == 'h')
{
scope.width = scope.height;
}
$(elem).outerHeight(scope.height);
$(elem).outerWidth(scope.width);
}
scope.onResize();
angular.element($(window)).bind('resize', function() {
scope.onResize();
});
}
}
});
test.htm:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
*
{
box-sizing: border-box;
}
html, body
{
margin: 0;
padding: 0;
}
#left, #right
{
display: inline-block;
}
#left
{
background: #101010;
}
#right
{
background: #777777;
}
#bottom
{
background: #AAAAAA;
}
</style>
</head>
<body>
<div ng-app="testApp" ng-controller="testCtrl">
<div id="content">
<div id="left" autoresize w="0.5" h="0.8"></div><div id="right" autoresize w="0.5" h="0.8"></div>
<div id="bottom" autoresize w="1" h="0.2">{{width}}</div>
</div>
</div>
<script src="vendor/angular.min.js"></script>
<script src="vendor/jquery-2.1.3.min.js"></script>
<script src="autoresize.js"></script>
<script>
angular.module('testApp', ['autoresize'])
.controller('testCtrl', function($scope, $http) {
});
</script>
</body>
</html>
The first problem is that when I open the webapp, the sizes don't init correctly: I must resize the window to get it work. Why doesn't the line scope.onResize() in the link function init everything correctly?
The second problem is that the scope variables "width" and "height" are not accessible in the element: in the example below, there isn't anything in the div "bottom". How do you get them accessible?
(Here you could think that CSS would be sufficient, however actually my app is a bit more complicated that the example below and CSS isn't sufficient)
Thanks a lot!
Ad 1)
The scope.onResize() does not work, because when the link function on a directive is called, the DOM element handled by that directive is not yet rendered (it will be, once the directive is done processing). Try to wrap that call in $timeout(), like this:
$timeout(function() { scope.onResize(); });
This will cause calling scope.onResize() during the next tick, which is after the directive finishes processing.
Ad 2)
See this question, on how to modify scope from within a directive.
You need call you scope.onResize(); method from load event of element, That would be efficient to initial kick off for setting css of elements
Add below method in directive & remove direct call of scope.onResize(); from link function
Code
element.on('load', function() {
scope.onResize();
});
Hello I am building a small web app using meanjs, I have managed to put together a category selector via various tutorials, books etc. it should look like the ebay category selector but I am stuck on how to show the selected categories.
this is what I have so far jsfiddle
var app = angular.module('categories', []);
app.controller('MainCtrl', function($scope) {
$scope.choice = null;
$scope.opts = {
"Basic Materials": {
"Chemical":{
"BlahChemicals": ["abc123", "blahblah"],
"Resources": ["Minerals", "Metals"],
},
"Steel":{
"BlahTin": ["abcsteel", "blahyuck"],
"Exsteel": ["Minerals", "Metals"],
},
"Timber": ["Hardwood", "SoftWood"]
}
};
});
app.directive('catSelect', function($compile, $parse) {
var ddo = {
restrict: 'E',//only matches element name
scope: {config:'=config'},
replace: true,
controller: function($scope, $attrs, $element) {
$scope.selected = null; // a place to store the result of this iteration
// make an selections array to display the current set of keys
if (angular.isArray($scope.config)) {
// if it is an array, just copy
$scope.selections = angular.copy($scope.config);
} else if (angular.isObject($scope.config)) {
$scope.selections = [];
//if it is an object, extract the key's to an array
angular.forEach($scope.config, function(cat, key) {
$scope.selections.push(key);
});
}
$scope.$watch("selected", function(newCat, oldCat) {
if (newCat === oldCat || newCat === null) {return; } //nothing to do.
$scope.sub = $scope.config[newCat]; //make the current selection the root for the next
if ($scope.sub && angular.isObject($scope.sub)) { // is there an subselection to make?
$element.find("span").remove(); //remove previous added selects..
newSelect = '<cat-select config="sub" class="catSelectSubItem"></cat-select>';
$element.append($compile(newSelect)($scope));
}
});
},
template: '<span><select ng-model="selected" ng-options="cat for cat in selections"></span>',
};
return ddo;
});
The CSS
select {
display: inline;
margin-left: 0;
float: left;
height: 260px;
margin-left: 15px;
background: #FFF;
min-width: 15.0em;
}
The HTML
<!DOCTYPE html>
<html ng-app="categories">
<head>
<meta charset="utf-8" />
<title>AngularJS Categories</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" data-semver="1.0.8"> </script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<cat-select config="opts"></cat-select>
</div>
</body>
</html>
So with any luck someone out there will be able to point me in the right direction
In order to retrieve the multiple selected categories you must keep track of them somehow.
I was able to make a quick edit on your jsFiddle so it stores the selected options in an array and shows that on the HTML... you can then use it on your controller to do whatever you need.
It probably could use some more optimization and defensive coding, but I guess you can do it yourself :)
Here is the fiddle, hope that helps:
http://jsfiddle.net/j8bq7rm1/1/
<div style="display: block;">{{selectedCategories}}</div>
<div>
<cat-select config="opts" selected-items="selectedCategories"></cat-select>
</div>
Thanks
Working on a reporting application where reports are generated (in HTML) from a BIRT Report Engine object. The report data comes as a JSON string is recieved from XHR. The JSON string contains a combination of HTML and javascript (a function call, specifically). Once received, the report data is stuffed into a for display in the view. The view is put together using AngularJS.
I did some research and found that binding the HTML/javascript to the view in Angular requires the use of $compile. Using that as a basis, i put together some code that will include data and execute code bound from a string defined explicitly in the $scope. But - unless i'm going overlooking something after staring at the same stuff for a couple hours, the approach i'm using does not work with $scope data defined by XHR. Here's a plunkr to show the general idea implemented. Any suggestions would be greatly appreciated.
The HTML
<!DOCTYPE html>
<html data-ng-app="example">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="controller" >
<h1>Static Content</h1>
<p><button href="javascript: void(null)" role="link" ng-click="loadSubreport('recv_po_detail.rptdesign', 'static')">PO000007</button></p>
<h1>HTML from static string</h1>
<div compile="snippet"></div>
<h1>HTML from server string</h1>
<div compile="html.body"></div>
<hr />
<button ng-click="alert()">Show XHR Data</button>
</body>
</html>
The Javascript
var app = angular.module('example', []);
app.controller('controller', ['$scope', '$compile', '$http', function ($scope, $compile, $http){
$scope.snippet="<p><button href=\"javascript: void(null)\" ng-click=\"loadSubreport('recv_po_detail.rptdesign', 'compiled')\">PO000007</button></p>";
$http.get('data.json')
.success(function (data) {
$scope.html = data;
});
$scope.loadSubreport = function (filename, source) {
alert("Called from " + source);
};
$scope.alert = function () {{
alert($scope.html.body);
}}
}]);
app.directive('compile', ['$compile', function ($compile) {
"use strict";
return function (scope, element, attrs) {
var ensureCompileRunsOnce = scope.$watch(
function (scope) {
return scope.$eval(attrs.compile);
},
function (value) {
element.html(value);
$compile(element.contents())(scope);
ensureCompileRunsOnce();
}
);
};
}]);
Your watch goes off right at the start, when html.body still is undefined.
Then you run ensureCompileRunsOnce() and unwatch the scope. So the proper report, once loaded, never gets compiled.
I uncommented the line ensureCompileRunsOnce() and get a nice view of the report.
DEMO