I have this example
<div ng-controller="MyCtrl">
<div compile-template ng-bind-html="post"></div>
</div>
And the angularjs code:
angular.module('myApp',[])
.controller('MyCtrl', function($scope, $sce,$timeout) {
$scope.name = 'World';
$scope.post = $sce.trustAsHtml("<h1>hello {{name}}</h1>");
$timeout(function(){
$scope.name = "3333";
},3000);
});
angular.module("myApp").directive('compileTemplate', ["$compile", "$parse", function($compile, $parse) {
return {
restrict: 'A',
link: function($scope, element, attr) {
var parse = $parse(attr.ngBindHtml);
function value() { return (parse($scope) || '').toString(); }
$scope.$watch(value, function() {
$compile(element, null,-9999)($scope);
});
}
}
}]);
If you look carefully, you will notice this function.
$compile(element, null,-9999)($scope);
If i make it $compile(element)($scope), it does not work any longer.
Why is that?
Here is the fiddle.