contenteditable 지역의 각도 명령

Question

내 사이트의 contenteditable region에 삽입 된 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

당신의 execCommand를 사용하는 이유 (가 있습니까, HTML useing $ 서비스 컴파일 삽입하기 전에 컴파일 할 수 있습니다)? execCommand는 전달한 HTML이 문자열이 될 것으로 예상하므로 Angulars 데이터 바인딩의 이점을 얻지 못하게됩니다. 즉, 범위의 URL 속성을 변경하면 DOM이 업데이트되지 않습니다.

나는이 대신처럼 구현하는 것 :

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

당신은

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