1

私はドロップダウンで jquery プラグインを使用しています。また、Angular js を使用して、選択内容に基づいてコンテンツを更新しています。私が抱えているAngularウォッチの問題はjqueryプラグインでは機能しません。プラグインを削除するとすべてが機能しますが、使用する必要があるため削除できません。これが私のコードです：

<select id="chart_csv" ng:model="report">
    <option value="cancel">Cancel</option>
    <option value="rate">Rate</option>
</select>

そして、ドロップダウンで使用するこの jquery プラグインがあります: jquery プラグイン: http://designwithpc.com/Plugins/ddSlick

jQuery(function($){
    $('#chart_csv').ddslick({
        width:300,
        selectText: "Select your csv output",
        imagePosition:"right" 
    });        
});

angularには次のコードがあります：

$scope.$watch("report", function() {
    switch ($scope.report) {
        case "cancels":                
            //update some content              
        case "rate":       
           //update other content

        default:
           // default here
    }
});

jqueryプラグインによってトリガーされた変更をAngularにリッスンさせるにはどうすればよいですか?

4

1 に答える 1

3

上記のコメントで、そのようなディレクティブを作成する方法を尋ねられました。すべての JavaScript と同様に、この猫の皮を剥ぐ方法はたくさんあります。基本を説明します。私はあなたが使用しているプラ​​グインにあまり詳しくないので、おそらくあなたに合ったものを思いつくことができるでしょう。使用しようとしています:

app.directive('myDdslick', function($parse) {
  return {
     restrict: 'A', //this is an attribute,
     link: function(scope, elem, attr, ctrl) {
         var model = $parse(attr.myDdslick);
         elem.ddslick({
            width:300,
            selectText: "Select your csv output",
            imagePosition: "right" 
         };
         elem.change(function(){
           model.assign(scope, elem.val());
         });
     }
  }
});

次に、マークアップは次のようになります。

<select id="chart_csv" my-ddslick="report">
    <option value="cancel">Cancel</option>
    <option value="rate">Rate</option>
</select>

どれもテストされていませんが、それが基本的な考え方です。表面的には、 ng-model が機能するはずだったようです。上記が機能しない場合は、プラグインがプログラムで値を設定しているため、選択の変更イベントが発生していない可能性があります。

それが役立つことを願っています。

于 2012-10-05T14:07:02.820 に答える