javascript - 内容可编辑区域中的 Angular Directive(指令)

Question

我无法激活插入我网站上可内容编辑区域的 Angular 指令。如果我使用scope.$apply()，它会说它已经在运行。

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>

我希望它编译 url 并在 href 参数中提供有效链接，而不是显示原始代码。

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

Answer 1

您可以在插入 HTML 之前使用 $compile 服务进行编译，

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