AngularJS : 템플릿에서 텍스트 영역의 값을 설정

Question

내 응용 프로그램에서는 사용자에게 확인 메시지를 보낼 수있는 옵션이 제공됩니다. 이 메시지는 기본 값 (다른 컨텍스트에 따라 다름)으로 미리 생성되지만 사용자가 편집 할 수 있어야합니다.

angularJS에서 미리 생성 된 메시지는 템플릿에서 가져온 것입니다. 그래서 예를 들어 Msg1.html과 Msg2.html이 있는데 각각 MsgCommon.html (아마도 ng-include를 사용)이 포함되어 있습니다. 그런 다음 결과 파일을 현재 범위로 보간하여 미리 생성 된 메시지의 텍스트 버전을 제공합니다.이 텍스트 버전은 아마도 텍스트 영역에 저장됩니다.

그러나 angularJS로이 작업을 수행하는 방법을 찾지 못했습니다. AngularJS는 내용을 올바르게 처리하지 못하므로 ng-include를 넣을 수 없습니다. 그리고 아마 텍스트 영역에 ng 모델이 있어야합니다. 따라서 템플릿을 처리 한 후에 모델 요소를 컨트롤러에서 초기화해야합니다. 다음은 거의 작동합니다

는

$http.get('msg1.html', {cache: $templateCache}).then(function(resp) { 
    $scope.msg = $interpolate(resp.data)($scope); 
}); 

in html: 
<textarea ng-model='msg'></textarea> 

이 제대로 같은 문자열을 보간 {{...}}하지만 NG-반복하거나 같은 지시문을 처리하지 않습니다 NG를-있습니다. 대신 $ compile 형식을 사용해야 할 것으로 추측하지만 DOM 문자열이나 요소를 기대하며 메시지가 HTML이 아닙니다.

어떻게 할 수 있습니까?

Answer 1

이 솔루션은 데모 용입니다. 실제 시나리오에서 이것을 사용하지 않는 것이 좋습니다. 난 그냥 $interpolate을 사용하여 컨트롤러에서 필요한 논리 권리를 만드는 것이 좋습니다 생각합니다. (예. 당신이 당신의 컨트롤러 목록을 연결하고 보간 수 대신 ng-repeat를 사용하는이 문자열)이 추한 솔루션의

아이디어는 (일반 텍스트 만 얻을 수있는 템플릿과 요소의 사용 innerText을 컴파일하는 것입니다 Plunker) :

$templateRequest('msg1.html').then(function(resp) { 
    var el = angular.element('<div></div>'); 
    var templateScope = $scope.$new(); 

    templateScope.name = 'Foo' 

    templateScope.tasks = ['t1', 't2', 't3', 't4']; 

    el.html(resp); 
    $compile(el.contents())(templateScope); 

    setTimeout(function(){ 
    $scope.msg = el[0].innerText; 
    $scope.$apply(); 
    }, 10); 
});