5

アプリ内のディレクティブを使用して jQuery multiselect プラグインを実装しようとしています。選択要素は次のとおりです。

<select multiple 
        ng-model="data.partyIds" 
        ng-options="party.id as party.name for party in parties" 
        xs-multiselect="parties">
</select>

モデルpartiesモデルは $http を介してロードされます。multiselect プラグインはoption内の要素を解析し、適切selectな複数選択を生成します。

select複数選択プラグインにデータを更新するように指示できるように、要素にオプションが設定されていることを検出する方法はありますか?

これが私の指示です：

machineXs.directive("xsMultiselect", function() {
    return {
        restrict: "A",
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.multiselect().multiselectfilter();
            scope.$watch(scope[attrs["xsMultiselect"]], function() {
                // I tried watching but it doesn't help
                element.multiselect('refresh');
                element.multiselectfilter("updateCache");
            });
        }
    }
});
4

1 に答える 1

5

コメントで説明されているように、使用

scope.$watch(attrs.xsMultiselect, ...)

ウォッチがトリガーされるタイミングと ngOptions が DOM を更新するタイミングがわかりません。ウォッチのトリガーが早すぎることがわかった場合は、$evalAsync()または $timeout() を使用してみてください。$evalAsync は後で実行されますが、DOM がレンダリングされる前に実行されます。$timeout() は、DOM がレンダリングされた後に実行されます。

scope.$watch(attrs.xsMultiselect, function() {
   scope.$evalAsync(function() {
      element.multiselect('refresh');
      element.multiselectfilter("updateCache");
   });
});

または、DOM がレンダリングされた後:

scope.$watch(attrs.xsMultiselect, function() {
   $timeout(function() {
      element.multiselect('refresh');
      element.multiselectfilter("updateCache");
   });
});
于 2013-03-13T18:41:22.083 に答える