Tải mẫu AngularJS trong trang, tự động

Question

Tôi có một trang chứa 2 bộ điều khiển: một bộ điều khiển danh sách 'ứng dụng', và một cái khác để đặt mẫu Góc mới vào bên trongHTML của phần tử Div của nó.

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

Tôi đã thử bằng cách sử dụng chuẩn {{biểu}} cam kết ràng buộc, nhưng họ không làm việc với html, tôi cũng đã thử các ng-bind-html-không an toàn chỉ thị (Binding innerHTML như của App yêu cầu trả lại) nhưng bộ điều khiển không được thực hiện trong mã mới này.

Vấn đề có vẻ là bằng cách sử dụng Ràng buộc, Góc không phân tích cú pháp nội dung của html được đề cập để sử dụng nó làm ứng dụng góc. Bất kỳ ý tưởng nào về cách làm cho nó phân tích cú pháp nội dung động?

Answer 1

Hãy nhìn vào các uiRouter mô-đun (từ dự án AngularUI). Nó cho biết thêm khái niệm về các trạng thái, tương tự như các tuyến đường, nhưng với các tính năng khác, chẳng hạn như khả năng lồng chúng. Ví dụ:

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

MySubCtrl sẽ được kích hoạt bất cứ khi nào bạn đi đến /mystate/something và bạn có thể sử dụng "cái gì đó" như một tham số (xem $stateParams). Bạn có thể lồng các trạng thái vào bất kỳ mức độ nào.

Answer 2

Dường như dịch vụ biên dịch $, khi nạp các phần tử bạn muốn biên dịch lại cùng với phạm vi hiện tại của bạn, thực hiện những gì tôi đang tìm kiếm.

Ví dụ từ nguồn của tôi:

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. 

Điều này sẽ giúp bất cứ ai gặp vấn đề của tôi, tôi hy vọng.

Answer 3

Nhìn vào $routes và ngView trong angularjs.

Dưới đây là một ví dụ rất cơ bản:

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