2014-12-09 3 views
1

각도 범위에 바인딩 된 데이터가 포함 된 div의 콘텐츠를 가져오고 싶습니다. Angular js 바인딩을 사용하는 div의 내용을 가져 오는 방법은 무엇입니까?

<div id='someDiv'> <h1> {{someText}} </h1> </div> 

컨트롤러에서

,

$scope.someText = 'Hello World'; 

innerHTML 속성이 작동하지 않습니다. document.getElementById ('someDiv'). 언 바운드 변수를 반환하므로 innerHtml이 작동하지 않습니다.

var content = document.getElementById ('someDiv'). innerHtml; console.log (content); 그렇게

'<h1> Hello World! </h1>'이 어떻게 달성 할 수와 같은 값이다에 기록 <h1> {{someText}} </h1>

나는 그것이 변수 후 DIV의 내용을 반환 할에

결과는 바인딩?

+2

: 여기

이러한 지침의 예입니다. 'innerHtml'은'innerHTML'이어야하고 그것을 타임 아웃 할 때 포장을 시도하십시오. 'setTimeout (function() {console.log (document.getElementById ('someDiv '). innerHtml);});'http://jsbin.com/lodazaxose/4/edit – PSL

+1

각도의 다이제스트주기까지 기다려야 할 수도 있습니다. 끝내라. 단순히 setTimeout()에서 수행하는 것만으로는 충분하지 않을 수 있습니다. – pbkhrv

+0

@PSL, 감사, 귀하의 의견과 바이올린은 근본적인 문제를 보여줍니다. – Jarnal

답변

2

각도로 $ timeout 서비스를 사용하려고합니다. 각도를 벗어 났을 때 다이제스트주기가 언제 완료되는지를 알 수있는 확실한 방법이 없기 때문에 HTML을 추출하는 지시문을 작성할 수 있습니다. 당신은 아마 너무 일찍도 각도가이를 처리 할 수있는 기회를 가지고 전에 값을 얻기 위해 노력하고있다

module.directive('getRenderedHtml', function($timeout) { 
    return { 
     controller: function ($scope) { 
      return {}; 
     }, 
     requires: 'getRenderedHtml', 
     link: function(scope, element, attrs, thisController) { 
      var rawHtmlContainer = angular.element('<div></div>'); 
      $timeout(function() { 
       thisController.html = element[0].innerHTML; 
      }); 
     } 
    } 
}); 

http://jsfiddle.net/rnpn8rj0/

+0

덕분에 지시문 예제가 훌륭합니다. 컨트롤러 내에서 변수를 통해 렌더링 된 html에 액세스하도록 지시문을 수정하는 방법은 무엇입니까? – Jarnal

+0

그 대답은 HTML을 사용할 곳/방법에 따라 다릅니다. 컨트롤러에 데이터를 저장하는 것은 옳지 않은 것처럼 보입니다. 앱의 여러 다른 위치에 데이터가 필요한 경우 데이터를 서비스에 저장하는 것이 더 적합합니다. 또는 지시문의 컨트롤러에 데이터를 저장할 수 있지만 자식 지시문 만 사용할 수 있지만 HTML에서도 직접 사용할 수 있습니다. – Enzey

관련 문제