9

ユーザーが画像をトリミングできるようにしたいのですが、この JQuery プラグインを見つけました - http://deepliquid.com/content/Jcrop.html

Angular-ui の Jquery パススルー オプションで使用してみましui-jq=Jcropた。<img>

問題は、ng-src を使用して画像を動的に変更すると、機能せず、何も表示されないことです。src に変更して静的 URL を入力すると、画像と Jcrop が表示されます。

どうすれば修正できますか？また、Jcrop のコールバックを聞いて、ユーザーの選択内容を知るにはどうすればよいですか?

AngularJS に画像トリミング機能を追加するためのより良い/より簡単な方法はありますか?

4

3 に答える 3

9

これが私の解決策です：

img 要素を作成し、それにプラグインを適用するディレクティブを作成しました。src が変更されると、この img が削除され、プラグインによって作成されたコンテンツも破棄され、新しい src で新しい img が再作成され、プラグインが再度適用されます。

また、選択されたものを調整できるように「選択された」コールバックも提供されます (スコープ値を変更できるように $apply にラップされます)。

Plunker で私のソリューションを確認してください

于 2013-01-14T16:58:54.493 に答える
1

ui-eventキーがイベント名で、値がコールバックであるイベント定義オブジェクトを作成するために活用できます。または、単にこれらのイベントを Jcrop のオプションとして渡すこともできます (ドキュメントによると) 。

最後に、プラグインを再トリガーするために監視する式を追加できるようにする新しい更新があります。ui-jqui-refresh

理論的にはできるはずです

<img ui-jq="Jcrop" 
     ui-options="{onSelect:myCallback}"
     ui-event="{onChange:'myCallback($event)'}"
     ui-refresh="imgSrc"
     ng-src="imgSrc" />

注: これは単純にパススルーを再起動するだけであり、自動的に問題が修正されるわけでも、再初期化時にプラグインが適切に動作するわけでもありません。

私たちは、さまざまなイベントをさまざまなタイミングでトリガーできるようにするための優れた方法に取り組んでいます。

于 2013-01-15T00:07:34.913 に答える