AngularJS 수동으로 컨트롤러 및 템플릿 렌더링

AngularJS 수동으로 컨트롤러 및 템플릿 렌더링

사용자가 특정 페이지에 표시되는 "위젯"을 구성할 수 있도록 하는 플러그인 시스템을 angularjs에 구현하려고 합니다.각 위젯은 컨트롤러와 템플릿(url)에 의해 정의됩니다.컨트롤러를 인스턴스화하고 템플릿을 사용하여 호출하여 생성된 콘텐츠를 포함하는 디렉티브를 작성할 수 있습니까?

목표는 다음과 같습니다.

<div class="widget" ng-repeat="widget in widgets">
    <widget controller="widget.controller" templateUrl="widget.templateUrl"></widget>
</div>

여기에는 두 가지 방법이 있습니다. 하나는 이미 사용 가능한 도우미 지시사항을 사용합니다(예:ngInclude그리고.ngController두 번째는 수동입니다.수동 버전이 더 빠를 수 있지만 잘 모르겠습니다.

간단한 방법:

간단한 방법은 새로운 요소를 간단하게 작성하는 것입니다.ngController그리고.ngInclude속성을 지정하고 지시어 요소에 추가한 다음$compile다음 중 하나를 선택합니다.

var html = '<div ng-controller="'+ctrl+'" ng-include="'+tpl+'"></div>';
element.append(html);
$compile( element.contents() )( scope );

수동적인 방법:

수동적인 방법은 이러한 지시들이 순서대로 수행하는 것입니다. 이 논리는 다음과 매우 유사합니다.ngView(단, 복잡함 없이) 그렇게 합니다.템플릿을 가져와 저장합니다.$templateCache를 DOM 에 추가합니다.새로운 자 스코프를 생성하여 제공된 컨트롤러를 인스턴스화하고 해당 컨트롤러를 요소에 할당합니다.마지막으로 저희가$compile다음 중 하나를 선택합니다.

$http.get( tpl, { cache: $templateCache } )
.then( function( response ) {
  templateScope = scope.$new();
  templateCtrl = $controller( ctrl, { $scope: templateScope } );
  element.html( response.data );
  element.children().data('$ngControllerController', templateCtrl);
  $compile( element.contents() )( templateScope );
});

(여기에는 가비지 컬렉션은 없습니다.위젯이 변경되었을 경우 구현해야 합니다.)

다음은 두 가지 방법을 모두 보여주는 플런커입니다.http://plnkr.co/edit/C7x9C5JgUuT1yk0mBUmE?p=preview

언급URL : https://stackoverflow.com/questions/16343458/angularjs-manually-render-controller-and-template