0

これが以前に尋ねられたかどうかはわかりませんが、角度のある双方向バインディングの投稿をたくさん見ましたが、率直に言って、彼らが何について話しているのか理解できませんでした. だから私は私の問題をもう一度述べます。

このようなタグ入力プラグインを使用したいとしましょう。tags と呼ばれる角度ディレクティブを定義し、その中で、テキスト入力で tagsinput を初期化します。テキスト要素は、サービスからコントローラーに取り込まれたモデルにバインドされます。

私はここのプランカーでこれを持っています。

問題は、ディレクティブが読み込まれるときに、モデルがまだ入力されていないため、tagsinput プラグインが空の値で初期化されることです。しかし、サーバー側の値で初期化する必要があります。私はこの問題に頻繁に遭遇し、大罪であることがわかっているコントローラー内のサービスコールバックでプラグインを初期化することに頼っています。

最終的に、あるレベルで、サービスが返されるまでプラグインの初期化を遅らせて、値を利用できるようにする必要があるという考えから抜け出すことはできません。そして、それを行う角度のある方法でさえ、これはどういうわけか達成されると言ったら、私は正しいですか? しかし、いずれにしても、これを機能させる方法がわかりません。

4

2 に答える 2

2

この問題を解決する最善の方法は、ディレクティブ内でウォッチャーを使用することだと思います。

var app = angular.module('app', []);

app.controller('Main', function ($scope, $timeout) {

   //this simulates data being loaded asynchronously after 3 second 
   $timeout(function () {
       $scope.list = [1, 2, 3, 4];
   }, 3000);

});

app.directive("mydirective", function()
{   
    return {
        restrict: "A",
        link: function(scope, element, attrs)
        {
            scope.$watch('list', function (newVal, oldVal) {
                if (newVal) {

                    //initialize the plugns etc
                    scope.result = 'Model has been populated';
                }    
            });
        }
    };
});

私の例では、コントローラー内で $timeout を使用してデータの非同期ロードをシミュレートしています。「リスト」モデルが読み込まれると、ディレクティブ内のウォッチャーがそれを認識し (newVal は空でも未定義でもありません)、プラグインを初期化できます。 . これは、コードがはるかに簡潔になるため、コントローラー内のコールバックよりも優れたアプローチです。

ここにjsBinがあります

編集：

モデルにデータが入力されたときに、ダイジェスト サイクルを起動する必要があることを覚えておいてください。$resource または $http を使用してサーバーからデータをフェッチする場合は心配する必要はありませんが、Angular の外部で行う場合は $scope.$apply() でダイジェスト サイクルを開始する必要があるため、ウォッチャーは、モデルが作成されたことを認識できます。

于 2013-05-28T19:39:35.053 に答える
1

linkバートランドが言ったように、ディレクティブ関数でウォッチャーを使用することで達成可能です。データが表示されるのを待つ必要があり、これがウォッチャーの目的です。ここであなたのプランカーへの私のアップデートを見てくださいhttp://plnkr.co/edit/hb3UYl。

$timeoutの代わりに非同期応答を偽装しまし$httpたが、ここでは問題ではありません。

の変更を探すディレクティブのリンク関数にウォッチャーを設定します$scope.list。変更が検出され、newValue有用なものである場合は、それを使用して入力フィールドに入力し、タグ リストに変換します。

これがあなたが操作しているものであるため、私はあなた$('.taginput')をに変更したことに注意してください。elementまた、操作したい DOM 要素を current の階層の下だけで検索するのも良い方法だと思いますelement。これにより、特定の要素にディレクティブを配置した場合、この要素とその子以外の要素は影響を受けないことが保証されます。

于 2013-05-28T20:16:33.227 に答える