8

HTMLに次の行があります。

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

get を使用$resourceして HTML を取得し、HTML を に割り当てる$scope.departmentConfigと、ビューが完全に更新されます。に割り当てられた HTML には属性を$scope.departmentConfig含むフォーム要素が含まれてい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の例を見たことがありますが、私のものはそうではありません。ブートストラップを呼び出すのが早すぎますか? 私はまた、このような$watch上に置いてみました$scope.departmentConfig

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

しかし、それもうまくいきませんでした。これには簡単な説明があるに違いありませんがng-model、ページのコンパイル後にモデルにバインドするためにロードされる入力要素を取得できないようです。これは、自分のページで作業するために必要な最後の機能です。私の設定についても詳しい情報が必要な場合はお知らせください。

簡単に言えば、DOM がロードされたことを知った後で、DOM のセクションを強制的に再コンパイルするにはどうすればよいでしょうか?

アップデート

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

4

1 に答える 1

13

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

$compile サービスを使用する必要があります。

現在の例を編集して機能させる方法は次のとおりです: http://jsfiddle.net/andytjoslin/ctyfg/21/。しかし、コントローラーで DOM 操作を行う必要があるため、この方法は最終的にはうまくいきません。

基本的に ng-bind-html に実行させたいことを実行するディレクティブを作成するだけです: http://jsfiddle.net/andytjoslin/ctyfg/22/

于 2012-07-03T15:38:39.237 に答える