anglejs ng-modelは更新されません

Question

私は自分のアプリケーションに使用するFont Awesomeアイコンピッカーを持っていますので、従業員はコードをオンラインで検索せずに簡単に別のアイコンにアクセスできます。

アイコンをクリックすると、NGモデルが更新されません。 AngularJSが入力に加えられた変更を特定するために、まず別の文字またはスペースを入力する必要があります。

https://i.gyazo.com/21d80e370726166a200f1165e169a0cf.gifここでは何が起こっているのかの例です。

左下に、同じngモデルのデータを示すラベルがあります。アイコンを選択すると、モデルは更新されません。スペースや他のキャラクターに入ると、それが更新されます。

コードは、私が持っている：私は、カスタムeditCellTemplateでDevExtremeからのGridViewを使用してい

editCellTemplate: function (container, options) { 
    container.html('<input class="icon-picker-input edit icp icp-auto" type="text" ng-model="iconInput" /><script>$(".icp-auto").iconpicker();</script>'); 
    options.setValue($scope.iconInput); 
    $compile(container)($scope); 
} 

。

はバインディング：ここで宣言され

：

誰もがこの問題を解決する方法についての手掛かりを持っていますか？前もって感謝します！

Answer 1

あなたのコードが意図したとおりに機能しない主な理由は、モデルを更新するために、Angularのみがユーザーの対話イベントを監視することです。入力の値を直接設定することにより、アイコンピッカーがAngularを完全にバイパスします。アイコンピッカー更新処理のhook設定する必要がモデル更新するために

：あなたはアイコンを選択するたびに、iconInputスコープ変数を自分で上書きのいずれかを（そして$scope.$apply呼び出しでこれをラップする）はるかに単純または、入力要素の'input'イベントをトリガーすると、Angularが新しい値を取得します（here参照）。

私はあなたがこのような何かお勧め：あなたは完全にあなたのメインコードのアイコンピッカーをインスタンス化することができますので、私はあなたのコンパイルされたHTML内のスクリプトタグを削除

editCellTemplate: function (container, options) { 
    container.html('<input class="icon-picker-input edit icp icp-auto" type="text" ng-model="iconInput" />'); 
    options.setValue($scope.iconInput);   
    $compile(container)($scope); 

    // Avoid inline script tags, you can make the iconpicker here 
    $(".icp-auto").iconpicker(); 

    // Watch for icon picker selections 
    $(".icp-auto").on('iconpickerSelected', function(e) { 
     // Fire the "input changed" event 
     $(e.currentTarget).trigger('input'); 
    }); 
} 

お知らせ。スクリプトタグは、しばしばあなたが望むものではないグローバルコンテキストで評価されます。

更新：あなたがあなたのコメントに報告し、コンパイル時エラーがあなたの活字体のセットアップがiconPicker()メソッドが含まれていないjQueryのクラス（おそらくjquery.d.tsファイル）の定義を持っているという事実によるものです。実行時に、Angularでコンパイルされた<script>タグの内容は、Typescriptの型チェックを回避して、プレーンなJavascriptとして直接解釈されます。

JQueryインターフェイスで追加のメソッドを有効にする簡単な方法については、this answerを参照してください。コンパイルされた<script>要素にロジックを置くのをやめることを強くお勧めします。

Answer 2

あなたの問題は、iconpicker()は、角通知なしでinputを更新するということです。これを修正する方法は、$scope.$apply()の直後に電話することです。ここの問題はあなたのスクリプトを含む奇妙な方法です。そのjQueryの構文では、とにかく最初に一致した要素だけがiconpicker()と呼ばれるので、デモの2番目の行を編集してもそれはまったく機能しません。ユニークIDは明らかに固有のIDです。

editCellTemplate: function (container, options) { 
    container.html('<input class="icon-picker-input edit icp icp-auto"' + 
     ' type="text" ng-model="iconInput" id="uniqueID"/>' + 
     '<script>$("#uniqueID").iconpicker();$scope.$apply();</script>'); 
    options.setValue($scope.iconInput); 
    $compile(container)($scope); 
} 

...：代わりに

、これに数値IDおよび変更を生成します。私はそれを読者のための練習として残しておきます。