11

これが私の問題です。たとえば、舞台裏で jQuery ウィジェットを使用する次のディレクティブがあります。

module.directive('myWidget', [function() {
    return {
        require: "ngModel",
        restrict: "A",
        replace: true,
        templateUrl: "templates/myWidget.html",
        link: function(scope, element, attrs, ctrl) {
            element.widget_name().on('value_updated', function(event) {
                scope.$apply(function() {
                    var newModelValue = event.some_value;
                    ctrl.$setViewValue(newModelValue);
                });
            });

            scope.$watch(attrs["ngModel"], function(value){
                element.widget_name('set_value', value);
            });
        }
    };
}]);

したがって、モデルの値が変更されると、モデルの変更をリッスンするために $watch を使用して登録されたハンドラーが実行され、その結果、ウィジェットの 'set_value' メソッドも実行されます。これは、「value_updated」イベントがトリガーされることを意味します。

私の質問は、DOM イベント ハンドラーとウォッチャーの余分な呼び出しを避けるために、ディレクティブに同様の動作を実装するためのベスト プラクティスは何ですか?

4

1 に答える 1

4

の代わりにscope.$watch()、を実装することをお勧めしますctrl.$render()。$ renderは、Angular内の何かがモデルを変更した場合にのみ呼び出す必要があります。 フィドルの例。

これはあなたが言及しなかった問題を解決します。残念ながら、それはあなたが言及した問題を解決しません。フィドルでは、blurwidget.on（）イベントではなく、イベントがバインドされます。たぶんそれはあなたのために働くでしょう-すなわち、すべてのキーストロークではなく、ぼかしでのみモデルを更新します（ただし、これはウィジェットがキーストロークを受け入れていることを前提としています）。

ウィジェットの作成者に、イベントをトリガーしない「set」メソッドを提供するように依頼することもできます。次に、それを$ render（）メソッドで使用できます。

于 2013-03-13T19:44:10.713 に答える