2014-02-06 2 views
0

사용자 정의 가능한보고 기능을 지원해야하는 각도 앱이 있습니다. 제 의도는 사용자가 사용 가능한 많은 보고서 중 하나를 선택하고 백엔드 REST API를 사용하여 템플릿 을 JSON (최종 사용자가 템플릿을 사용자 정의 할 수 있음)으로 제공하도록 허용하는 것입니다.

그러면 응용 프로그램이 어떻게 든 "보고"보기 페이지에 템플릿을 삽입 한 다음 범위에 데이터를 넣고 Angular는 보고서/템플릿을 컴파일하고 표시해야합니다.

ng-include를 살펴 봤지만 URL이나 문서 경로 만 지원하는 것으로 보입니다. 그러나 이미 REST 서비스를 통해 템플릿 텍스트가 있으며 정적 URL이나 파일 경로를 사용할 수 없습니다. ng-include가 작동 할 수도있는 템플릿 텍스트를 직접 받아 들였지만 그렇지 않은 경우 REST API를 통해 이루어집니다.

지시문을 작성하려고 시도했지만 이미 범위에서 가져온 템플릿을로드하는 페이지 (getTemplate())의 메소드를 호출하려고했으나 내 지시문에 범위에 대한 액세스 권한이 없습니다.

이것을 수행하기 위해 어떤 전략을 사용해야합니까? 지시문이 가장 잘 보이지만 분명히 잘못하고 있으며 문서를 완전히 잃어버린 것입니다.

답변

1

당신은 컨트롤러의 DOM에 요소에 동적 템플릿을 컴파일 할 수 컴파일 한 후 컨트롤러에서 이런 일이 :

나는 하나의 DIV와 템플릿을 설치 경로를 것
var el = angular.element('#myselector'); 
el.html(mydynamichtmlfromresource); 

$compile(el.contents())($scope); 

컨테이너가 (당신이 HTMLToJS에게 온라인 도구 나 꿀꿀 작업을 사용하여 하나의 자바 스크립트 파일의 모든 정적 컨테이너 템플릿을 당겨 수) :

<section class="view"> 
    <div id="myselector"></div> 
</section> 
+0

이 기법을 사용해 보겠습니다. 제안 해 주셔서 감사합니다. – JohnC

1

내가 이 (getTemplate은())를 범위에서 이미 가져온 템플릿을로드 할 것이라고하지만 내 지시어는 범위에 대한 액세스 권한이없는 페이지에 메소드를 호출하려고 지시어를 작성하려고했습니다 분명히 .

예, 그렇습니다. 범위에서 지시문으로 데이터를 전달할 수있는 방법이 있습니다. 이 지시어 내에서,이 변수는 컨트롤러에서 사용할 수 고립 범위를

"scope": { 
        "directiveVar": "=" 
       }, 

를 사용할 필요가

<directive directiveVar='x'/> 

사용하는 지시어 범위 내에서 var에 'x'를 전달하려는 말할 수 및 POSTLINK 기능, 그래서 당신의 지시 템플릿은이 코드를 사용할 필요가있다 POSTLINK 안에이

<ng-bind-html="directiveVar"/> 

처럼 할 필요가

$scope.directiveVar =$sce.trustAsHtml($scope.directiveVar) 

참조

  • http://docs.angularjs.org/api/ng.directive:ngBindHtml
  • http://docs.angularjs.org/api/ng

      .$
  • +0

    나는이 노력 할게요 감사합니다, 지금 전에 ngBindHtml를 놓쳤다. – JohnC