Angular Directives in Contenteditable Regions

Question

I'm unable to activate Angular directives that are inserted into a contenteditable region on my site. If I use scope.$apply(), it says it was already running.

JS

angular.module('app', [])

.directive('edit', function(){
  return {
    link: function(scope, elm, attr){
      scope.url = "http://www.google.com";
      scope.press = function(){
        document.execCommand('insertHTML', false, '<a ng-href="{{url}}">test</a>');
      };
    }
  };
});

HTML:

<div edit contenteditable="true">Dummy Text</div>
<button ng-click="press()">Press</button>

I want it to compile the url and give a valid link in the href parameter, instead it shows the raw code.

JSBin: http://jsbin.com/moponige/1/edit

Answer 1

Do you have a reason for using execCommand()? execCommand expects the HTML you pass to be a string, which will prevent you from getting the benefit of Angulars data-binding. That is, if you change the url-property on the scope, the DOM won't get updated.

I'd implement it like this instead:

angular.module('app', [])

.directive('edit', function($compile){
  return {
    link: function(scope, elm, attr){
      scope.url = "http://www.google.com";
      scope.press = function(){
        var link = $compile('<a ng-href="{{url}}">test</a>')(scope);
        elm.append(link);
      };
    }
  };
});

Answer 2

You can compile before inserting HTML useing $compile service,

$compile('<a ng-href="{{url}}">test</a>')(scope)