2012-07-02 21 views
8

私は私のHTMLに次の行があります。AngularJS - NG-バインド-HTML-安全ではないとNG-モデルの問題

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

を、私は$resourceを使用するHTMLを取得するために取得するには、にHTMLを割り当てます$scope.departmentConfig、ビューが完全に更新されます。 $scope.departmentConfigに割り当てられたHTMLにはフォーム要素が含まれており、ng-model属性が含まれていますが、これらの入力要素の値を変更すると、$scopeモデルはまったく更新されません。

これは私が他のインターネットの記事の多くに基づいて、試してみましたが、それが動作していないものです。

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

私もいくつかのjsFiddleこれが動作しているように見えるの例が、鉱山を見てきましたそうではありません。あまりにも早くブートストラップを呼びますか?私はまた、このよう$scope.departmentConfig$watchを入れてみました:

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

が、それはどちらか動作しませんでした。私はこれに簡単な説明があると確信して、私はちょうどng-modelと入力要素を取得することができませんが、ページにコンパイルした後に読み込まれ、モデルにバインドされます。何か助けていただければ幸いです。これは私のページで働くために必要な最後の機能です。私の設定についての詳しい情報が必要な場合はお知らせください。

DOMをロードした後、DOMのセクションを強制的に再コンパイルするにはどうすればいいですか?ここで

UPDATE

は私がやりたいものをまとめたjsfiddleです:http://jsfiddle.net/j_snyder/ctyfg/。プロパティ2と3はモデルを更新しないことがわかります。外側のdivには、モデルバインディングに含まれるものも含まれていることを期待してブートストラップを呼び出しています。私がjsfiddleに投稿したのはこれが初めてです。この例が見えない場合は、私に知らせてください。

答えて

13

ng-bind-htmlは、新しい角度要素をコンパイルするのではなく、通常のHTML用に作成されています。

あなたは$compile serviceを使用します。

現在の例を編集する方法は次のとおりです:http://jsfiddle.net/andytjoslin/ctyfg/21/。しかし、あなたのコントローラでDOM操作を行う必要があるため、この方法は悪い結果に終わります。

あなたはただ、基本的にはやってあなたは何を望むかNG-バインドHTMLを行いますディレクティブを作成する必要があります。http://jsfiddle.net/andytjoslin/ctyfg/22/

+0

おかげでアンディ。私はAngular Google Groupにも投稿しました。ここにスレッドがあります。ちょうどあなたが投稿した行に沿って、私が必要としていることを実際に行う何かが働いています。 https://groups.google.com/forum/?fromgroups#!topic/angular/51-CNL6GEKE –

関連する問題