0

I have a directive that takes "previewHTML" as a $scope variable input. I simply want to insert this HTML into a div in my directive template.

I've been working on this problem for a week trying methods from using ng-bind-html, {{}}, $sce, $compile and everything I could think of inbetween; I'm at a loss of why this is so painfully difficult.

The closest I've gotten is to create a scope using $rootScope.$new(true), then attach the variables I need "newScope.value = 'myvalue'", then use $compile to compile the preview HTML and in the cloneAttachFn (which I assume is a callback for when it's finished compiling) I set the previewHTML scope variable, which is included as '< ... ng-bind-html="previewHTML">'

The html without the scope applied comes out fine, but the bindings aren't set. The weird thing is that in the object they are set, but in the outputted HTML they are not; meaning the element has been created, but the bindings haven't been set yet. Unfortunately, Angular won't take a jquery HTML object in ng-bind-html, even though it returns a jquery object in order to maintain the bindings in the HTML.

I'm going to have to use a timeout for now... but does anyone know how to do this very rudimentary thing of including html, that has binding, in a directive template (it has to come from a $scope variable, or at least be generated outside of the directive by the user of the directive)? [is it even async? The documentation is frustratingly unclear]

(Honestly, I'm tens of thousands of lines and a year in and the more I use Angular the more I'd rather use plain JS)

Sophie McCarrell
  • 2,831
  • 8
  • 31
  • 64
  • Awesome... a timeout doesn't even solve my problem. Setting previewHTML and it doesn't reflect on the page, even after a $apply... impressive Angular... ffs. – Sophie McCarrell May 29 '14 at 00:30
  • 1
    Is the compile directive in my [answer here](http://stackoverflow.com/questions/20358140/ng-click-doesnt-fire-when-added-post-load) in the ballpark of what you're looking for? Maybe with the result of `element.html(value);` being set into your template? – KayakDave May 29 '14 at 00:34
  • maybe... let me try it. – Sophie McCarrell May 29 '14 at 00:36
  • You are a god send! THis directive is essentially doing what i'm doing inside my own directive, but I think it being in its own directive is enough to appease the Angular gods into making it work. Still pissed at Angular though =P – Sophie McCarrell May 29 '14 at 00:45
  • Glad it helped! It looks to me like [Angular 2.0](http://blog.angularjs.org/2014/03/angular-20.html) is going to smooth out a number of rough spots- hopefully that'll make at least some of this easier. – KayakDave May 29 '14 at 00:51

0 Answers0