最近、Angularでui-selectをx-editableに適応させ、少しずつ時間をかけて最も受け入れやすいオプションを収集しなければならなかったため、今日は誰かを救うためにベストプラクティスを共有することにしました時間。
要するに、結果のディレクティブは、標準の編集可能選択に加えて、その場でオブジェクトを追加する追加機能を置き換えます。
より詳細に。
まず、最後から始めて、ui-selectにボタンを追加できるディレクティブのコードを提供します。 私の場合は、新しいオブジェクトを追加する形式でモーダルウィンドウ（ui-bootstrap modal）を呼び出す関数です。
app.directive("addNewItem", function($timeout) { return { restrict: "A", link: function(scope, e, attrs) { var method = attrs.addNewItem; var template = "<div class='add-new-item-container'>"+ "<button class='btn btn-xs btn-default pull-right'></button>"+ "<div class='clearfix'></div></div>"; e.find('li.ui-select-choices-group').append(template); e.find('div.add-new-item-container button').bind('click', function() { // workaround for closing ui-select $timeout(function() { e.trigger("click"); }); var searchResult = e.find('li.ui-select-choices-row').length; if ( ! searchResult ) { var value = e.find('input.ui-select-search').val(); scope[method].apply(null, [value]); } else { scope[method].apply(); } }); } } })
原則として、コードは非常に単純なので、いくつかの点に焦点を当てます。 まず、ボタンをクリックした後、ui-selectは閉じませんが、モーダルウィンドウのどこかをクリックすると閉じます。 そのため、$タイムアウトの松葉杖を追加する必要がありました。
第二に（もし最後の場合に関して）：ui-select検索で要素が見つからなかった場合、将来的にこの値でフォームを自動入力するために検索値をメソッドに渡し、少し時間を節約します。
主なディレクティブは次のとおりです。
app.directive('editableUiSelect', ['editableDirectiveFactory', 'editableNgOptionsParser', function(editableDirectiveFactory, editableNgOptionsParser) { var dir = editableDirectiveFactory({ directiveName: 'editableUiSelect', inputTpl: '<ui-select></ui-select>', render: function() { this.parent.render.call(this); var parsed = editableNgOptionsParser(this.attrs.eNgOptions); this.inputEl.attr('ng-model', 'editable.entity'); // , , // - , this.inputEl.attr('add-new-item', 'addNewItem'); // , this.inputEl.attr('on-select', 'setModel($item)'); this.inputEl.attr('theme', 'select2'); this.inputEl.css('width', '200px'); var html = "<ui-select-match><span ng-bind='$select.selected.name'></span></ui-select-match>"+ "<ui-select-choices repeat='" + parsed.ngRepeat + "'>" + "<span ng-bind-html='" + parsed.locals.displayFn + "'></span></ui-select-choices>"; this.inputEl.removeAttr('ng-options'); this.inputEl.append(html); } }); return dir; }]);
この指令は、標準のxeditable指令のイメージと類似性で作成され、その後わずかにやり直されました。
ディレクティブの作成中に遭遇した主な問題の1つは、モデルを変更できないことでした。そのため、オンセレクトの追加メソッドが追加されました。
これはすべて次のように使用できます。
<span data-pk="{{ entity.id }}" editable-ui-select="entity.property" ng-model="entity.property" e-ng-options="obj.id as obj.name for obj in objects | filter: $select.search track by obj.id" e-form="rowform"> {{ entity.property.name }} </span>
そして最後に、ボーナス。 テーブルレスポンシブ（ブートストラップ）でこのことを使用すると、ドロップダウンリストがテーブルによってブロックされる可能性があります（特に、2行で構成される場合）。 これを修正するには、cssを追加します。
.table-responsive .ui-select-dropdown { position: relative !important; }
おわりに このディレクティブを実装するための多くのオプションが存在する可能性があり、それらの中にはおそらくより良いオプションがあります。 公式のxeditableドキュメントに ui-selectのサポートがまだ記載されていないという理由だけでなく、トピックに関する情報がほとんど見つからず、見つけたものが異なるため、作品を公開しました。
この記事が誰かに役立つという事実だけでなく、角度の達人が私の指示を改善するのに役立つことを願っています。
UPD 小さな例： plnkr.co/edit/5dPKCnzbKE8D9XIR8ocX?p=preview