페이지 안의 AngularJS 템플릿을 동적으로로드하십시오.

Question

컨트롤러라는 두 개의 페이지가 있습니다 : 하나는 '앱'목록을 관리하는 페이지이고 다른 하나는 Div 요소의 innerHTML에 새로운 Angular 템플릿을 배치하는 페이지입니다.

<div ng-controller="appList"></div> 
<div ng-controller="appPane"> Dynamic content should be loaded here! </div> 

내가 표준 {{식}} 바인딩을 사용하여 시도했다, 그러나 HTML 작동하지 않습니다, 나는 또한 NG 바인드-HTML-안전 지침을 시도 (앱의에 innerHTML을 바인딩 요청의 반환)하지만 컨트롤러는이 새 코드 내에서 실행되지 않습니다.

Binding을 사용하면 Angular가 해당 html의 내용을 다시 각도 분석 응용 프로그램으로 사용하지 않는 것 같습니다. 동적 컨텐트를 파싱하는 방법에 대한 아이디어가 있습니까?

Answer 1

합니다 (AngularUI 프로젝트)를 uiRouter 모듈을 살펴보십시오. 그것은 노선과 꽤 비슷하지만 상태를 중첩 할 수있는 것과 같은 다른 장점을 가진 상태의 개념을 추가합니다. 예를 들면 : 당신이 /mystate/something로 이동하여 매개 변수로 그 "무언가"($stateParams 참조)를 사용할 수 있습니다 때마다

$stateProvider 
    .state('myState', { 
     url: '/mystate', 
     templateUrl: '...', 
     controller: 'MyCtrl' 
    }) 
    .state('myState.substate', { 
     url: '/{substate}', 
     templateUrl: '...', 
     controller: 'MySubCtrl' 
    }); 

MySubCtrl이 활성화됩니다. 상태를 원하는 수준으로 중첩시킬 수 있습니다.

Answer 2

$ compile 서비스는 현재 범위와 함께 다시 컴파일하려는 요소를 제공받을 때 내가 찾고있는 것으로 나타납니다. 내 소스에서

예 :이 사람이 내 문제가 발생하는 데 도움이

var appPane = $('#AppPane');//JQuery request for the app pane element. 
appPane.html(data);//The dynamically loaded data 
$compile(appPane.contents())($scope);//Tells Angular to recompile the contents of the app pane. 

, 나는 희망한다.

Answer 3

각도 배열의 $routes 및 ngView를 확인하십시오.

여기에 아주 기본적인 예제 :

http://jsfiddle.net/pXpja/3/