angularjs directive template with ng-bind-html in it, that uses scope of directive

Question

i have a directive, whose template is just <div ng-bind-html="myhtml"></div>. But the myhtml uses the scope of the directive.

I can´t get this work.

Example: fiddle

Answer 1

Basically this is not what bind-html is for, when you are looking to dynamically add html to your app, you need to check out $compile. This in combination with the typo that others have pointed out. I created a fiddle that shows your solution:

link: function(scope, elt, attrs) {
    var element = angular.element(scope.myhtml);
    var test = $compile(element)(scope);
    elt.append(test);
}

Hope this helped!

Answer 2

As you don't reference an expected result, I assume you want your directive to display at least something from the Controller's scope.

Mainly, you've defined your directive like this:

.directive('testDirective',

This is fine, however you're referencing it as follows:

<testDirective myvar="myvar" myhtml="myhtml" />

This is not OK - you should reference your directive with test-directive and not testDirective, this works:

<test-directive myvar="myvar" myhtml="myhtml" />