2012-07-02 6 views
8

Mam następującą linię w moim HTML:angularjs - NG-bind-html-niebezpieczne i ng model Problemy

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

i używam $resource dostać do pobrania HTML, należy przypisać kod HTML do $scope.departmentConfig, a następnie widok jest idealnie zaktualizowany. Kod HTML przypisany do $scope.departmentConfig zawiera elementy formularzy z atrybutami ng-model, ale gdy zmienię wartości w tych elementach wejściowych, w ogóle nie aktualizują modelu $scope.

To co próbowałem, na podstawie wielu innych stanowisk internetowych, i to nie działa:

$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']); 

Ja nawet widziałem kilka jsFiddle przykłady, gdzie wydaje się działać, ale kopalnia nie jest. Czy za wcześnie dzwonię do bootstrapa? Próbowałem też wprowadzenie $watch na $scope.departmentConfig tak:

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

ale to nie działa albo. Założę się, że jest to łatwe wyjaśnienie, po prostu nie mogę uzyskać elementów wejściowych z ng-model, które są ładowane po kompilacji strony, aby przywiązać się do modelu. Każda pomoc jest doceniana, jest to ostatni element funkcjonalności potrzebny do pracy na mojej stronie. Daj mi znać, jeśli potrzebujesz więcej informacji o mojej konfiguracji.

Po prostu, jak mogę zmusić sekcję DOM do ponownej kompilacji po tym, jak wiem, że została załadowana?

UPDATE

Oto jsfiddle przedstawiając co chciałbym zrobić: http://jsfiddle.net/j_snyder/ctyfg/. Zauważysz, że właściwość dwa i trzy nie aktualizuje modelu, a ja wywołuję bootstrap na zewnętrznym div, mając nadzieję, że będzie on zawierał te w wiązaniu modelu. Po raz pierwszy opublikowałem jsfiddle, daj mi znać, jeśli nie widzisz tego przykładu.

Odpowiedz

13

ng-bind-html jest tworzony dla zwykłego HTML, nie kompilując nowych elementów kątowych.

Będziesz musiał użyć $compile service.

Oto jak edytować aktualny przykład pracy: http://jsfiddle.net/andytjoslin/ctyfg/21/. Ale w ten sposób kończy się źle, ponieważ musisz manipulować DOMem w swoim kontrolerze.

Trzeba tylko stworzyć dyrektywę, która w zasadzie robić, co chciał NG-bind-html zrobić: http://jsfiddle.net/andytjoslin/ctyfg/22/

+0

Thanks Andy. Opublikowalem również w Angular Google Group, a tutaj jest wątek. Mam coś, co rzeczywiście zrobi to, czego potrzebuję, według linii, które właśnie napisałeś. https://groups.google.com/forum/?fromgroups#!topic/angular/51-CNL6GEKE –

Powiązane problemy