2016-11-21 1 views
2

기본적으로 내 서버에서 템플릿을 요청하고 있습니다. 이에 대한 간단한 예는 다음과 같습니다.AngularJS : 범위 변수에서 문자형 변수로 HTML 렌더링

$scope.template = { 
    'title': 'default', 
    'description': 'default template', 
    'html': '<html><head><style>body {background: red;}</style></head><body>{{data.name}}</body></html>' 
} 

$scope.data = { 
    name: 'John' 
} 

내 서버에서 수신하는 JSON 객체입니다. 이것을 DOM에 렌더링하고 싶습니다. 표시되는 것은 $scope.name에 저장되는 것입니다.

내 각

app.filter("trust", ['$sce', function($sce) { 
    return function(htmlCode){ 
    return $sce.trustAsHtml(htmlCode); 
    }; 
}]); 

이있다 그리고 이것은 내 HTML에

<div ng-bind-html="template.html | trust"></div> 

이는 HTML을 렌더링하지만, 잎 {{이름}}로 {{이름}} 때를 말해야한다.

+0

https://plnkr.co/edit/5XwTMRTK83KntRP5LE8I?p=preview – nmanikiran

+0

을 추가로 읽으십시오. https://docs.angularjs.org/api/ng/service/$compile – nmanikiran

+1

@ManiKiran 감사합니다. 귀하의 솔루션 – notacodemonkey

답변

0

는 당신이 다음과 같이 작은 따옴표로 이름을 넣어 $ scope.data을에서 잊어 보인다

$scope.data = { 
    'name' = 'John' 
} 

희망이 백엔드에서 (각 변수)

+2

아래에 언급했듯이 그것은 나는 실제 코드가 아니라 질문을 단순화했다. 질문을 업데이트했습니다. – notacodemonkey

3

가 HTML을 저장 작동하는 나쁜 관행입니다 . 우선 순위는 백엔드 코드를 리팩토링해야합니다.

당신은 백엔드에 액세스 할 수없는 경우 컴파일 $ 사용하는 지시문을 만들려고 할 수 있습니다뿐만 아니라 $interpolate를 사용

$scope.template = $compile('<html><head><style>body {background: red;}</style></head><body>{{data.name}}')($scope); 

당신은 컨트롤러에서이 작업을 수행 할 수 있습니다

$scope.template = $interpolate('<html><head><style>body {background: red;}</style></head><body>{{data.name}}')($scope); 
+0

나는 노드에있는 백엔드도 만들고 있습니다. 리팩토링 백엔드 코드를 어떻게 제안 하시겠습니까? 이를 위해 필자는 템플릿을 신속하게 전환하려고했습니다. 비취 같은 것을 사용할 수 있습니까? – notacodemonkey

+0

백엔드는 데이터 만 반환해야합니다. 형식 지정은 클라이언트 측에서 angularjs 템플릿을 사용하여 수행됩니다. – gyc

+0

맞아, 사용자에 따라 동적으로 표시해야하기 때문에 템플릿을 백엔드에 저장하려고합니다. 이 템플릿들은 모두 동일한 데이터를 보여줄 것이지만 형식이 다릅니다. – notacodemonkey

관련 문제