AngularJS - ng-bind-html-không an toàn và ng-model vấn đề

Question

Tôi có dòng sau trong html của tôi:

<div ng-bind-html-unsafe="departmentConfig" class="control-group"></div>

và tôi sử dụng một $resource có được để lấy HTML, chuyển nhượng HTML để $scope.departmentConfig và sau đó chế độ xem được cập nhật hoàn hảo. HTML được gán cho $scope.departmentConfig chứa các phần tử biểu mẫu, với thuộc tính ng-model trong đó, nhưng khi tôi thay đổi giá trị trong các yếu tố đầu vào này, chúng không cập nhật mô hình $scope.

Đây là những gì tôi đã cố gắng, dựa trên rất nhiều bài viết internet khác, và nó không làm việc:

$resource('resources/sources/departments/:mappedName', { 
     mappedName:departmentKey 
    }).get(function(departmentConfig) { 
     // This will call another function that will build a chunk of HTML 
     $scope.departmentConfig = $scope.buildDepartmentConfigHtml(departmentConfig); 
     // This is my feeble attempt to access the element, and bootstrap it to include the items in the $scope model. 
     var $departmentConfigContainer = $('#departmentConfig'); 
     angular.bootstrap($departmentConfigContainer, ['sourcemanager']); 

Tôi thậm chí còn nhìn thấy một số ví dụ jsFiddle nơi này dường như làm việc, nhưng tôi không phải. Tôi có gọi bootstrap quá sớm không? Tôi cũng đã cố gắng đưa một $watch trên $scope.departmentConfig như thế này:

$scope.$watch('departmentConfig', function() { 
    var $departmentConfigContainer = $('#departmentConfig'); 
    angular.bootstrap($departmentConfigContainer); 
}); 

nhưng nó đã không làm việc một trong hai. Tôi đặt cược có một lời giải thích dễ dàng này, tôi chỉ có thể không có vẻ để có được các yếu tố đầu vào với ng-model được nạp sau khi biên dịch trang để có được ràng buộc với mô hình. Bất kỳ trợ giúp nào được đánh giá cao, đây là phần chức năng cuối cùng tôi cần để làm việc trên trang của mình. Hãy cho tôi biết nếu bạn cần thêm thông tin về cấu hình của tôi.

Vì vậy, chỉ cần đặt, làm cách nào để buộc một phần của DOM biên dịch lại sau khi tôi biết nó đã được tải?

CẬP NHẬT

Đây là một jsfiddle phác thảo những gì tôi muốn làm: http://jsfiddle.net/j_snyder/ctyfg/. Bạn sẽ thấy rằng thuộc tính hai và ba không cập nhật mô hình, và tôi đang gọi bootstrap trên div bên ngoài, hy vọng rằng sẽ bao gồm những người trong mô hình ràng buộc. Đây là lần đầu tiên tôi đăng lên jsfiddle, vui lòng cho tôi biết nếu bạn không thể xem ví dụ.

Answer 1

ng-bind-html được tạo cho HTML thông thường, không biên soạn các yếu tố góc cạnh mới.

Bạn sẽ sử dụng số $compile service.

Dưới đây là cách bạn chỉnh sửa ví dụ hiện tại của mình để hoạt động: http://jsfiddle.net/andytjoslin/ctyfg/21/. Nhưng cách này kết thúc là xấu, bởi vì bạn phải thực hiện thao tác DOM trong bộ điều khiển của bạn.

Bạn chỉ cần tạo ra một chỉ thị rằng về cơ bản sẽ làm những gì bạn muốn ng-bind-html để làm: http://jsfiddle.net/andytjoslin/ctyfg/22/