0

Angular JS アプリのチャートに Chartist JS を使用しています。問題は、ここでこれを見ていることです。この問題を強調するJS ビンがあります。著者はそれに対する解決策を提供します。解決策は、Jquery で簡単に DOM 操作を行うことです。ただし、AngularJS で DOM を操作する方法は、ディレクティブを使用することです。ここで Angular JS の同じ問題を強調するplunker を作成しましたが、著者が提供したソリューションを Angular コードに組み込む方法について混乱しています。ここに解決策があります

$('[data-tab]').on('toggled', function (event, tab) {
    tab.find('.ct-chart').each(function(i, e) {
      e.__chartist__.update();
    });
});

編集: 要求に応じて JSFiddle が更新されるため、私がやろうとしていることは次のとおりです。3 つの異なるタブと 3 つの異なるグラフがあり、それらをクリックすると、それぞれのグラフが表示されます。タブの動作を可能にするために、スコープとモデルを使用して基本的なコードを作成しました。これにより、タブの変更が容易になります。問題は、チャートが最初またはデフォルトのタブ用に作成されているが、2 番目と 3 番目のタブ用に作成されていないことです。著者によって提供された解決策がありますが、AngualrJS でそれを実装する方法がわかりません

4

2 に答える 2

0

angular.element() メソッドを使用してこれを解決できました。したがって、Angular コードで jquery を使用したい場合。これは angular.element メソッドで行う必要があります。ただし、index.html の angular の前に jquery を含めるようにしてください。

jQuery が使用可能な場合、 angular.element は jQuery 関数のエイリアスです。jQuery が利用できない場合、angular.element は「jQuery lite」または jqLit​​e と呼ばれる Angular の組み込みの jQuery サブセットに委譲します。

私はこれを知りませんでした。ここから、それは私にとって学びでした。この投稿からの@pieterjandesmedtのアドバイスに従います。私はこれを行うことができました。これがどのように機能するかを知りたい他の人のために。この問題を解決するGitHubリポジトリを作成しました。問題のリンクは質問に記載されています。それが役立つことを願っています

于 2016-03-11T10:15:44.660 に答える