在AngularJs中進行模型推導評估之前訪問md-autocomplete輸入值

Question

我有一種情況，我想使用ng-model-options去抖動一個輸入值，但是我有一個特定的用例，需要在去抖動周期之前訪問原始輸入值。

在特殊情況下 ，即使去抖周期未到期，當用戶按下Enter鍵或按下搜索按鈕時，我也想立即訪問輸入值。 事實證明，在生產版中輸入搜索查詢的用戶通常會很快點擊Enter，誰知道呢？

因此，因為模型還沒有值，所以我嘗試直接使用jQuery訪問html輸入值：

var searchBox = document.getElementById('searchBox');
var el = angular.element(searchBox);
var val = el.val();

並且在原始javascript中：

var searchBox = document.getElementById('searchBox');
var val = searchBo.value;

但是這些結果給了我一個空的價值。

使事情復雜化的是，我使用的是md-autocomplete ，它具有自己的內置功能，而我不想復制或嘗試修改太多，而且我不確定如何直接將指令的輸入字段作為目標來獲取.val（ ）

背景：

我正在嘗試在AngularJs中實現一個具有“最佳選擇”建議的搜索頁面，並顯示全文搜索結果。

當用戶鍵入時，自動完成功能將呼叫服務以獲取建議，但是這些建議將與數據模型中特定字段完全匹配。 將會進行完整的測試搜索

我正在使用Azure Search API來提供查詢和建議，此問題的實現超出了此問題的范圍，但是一個快速的插件，它會在大型索引上產生超快速的響應，比我嘗試編寫的任何SQL都快。 。

我已經使用了防反跳模型選項來將對服務的建議查詢延遲，但效果很好，但是由於使用了防反跳，因此直到防反跳周期到期后，我才能通過綁定訪問輸入的值。

<!-- The Search Box -->
<form ng-submit="$event.preventDefault()">
    <div layout="row">
        <md-autocomplete id="searchBox"
                            ng-disabled="false"
                            md-no-cache="true"
                            md-search-text="vm.searchText"
                            ng-model-options="{ debounce: 300 }"
                            md-selected-item-change="vm.selectedItemChange(item)"
                            md-items="item in vm.querySuggester(vm.searchText)"
                            md-item-text="item.Text"
                            md-min-length="1"
                            placeholder="Search articles..." layout-fill>
            <md-item-template>
                <span md-highlight-text="vm.searchText" md-highlight-flags="i">{{item.Text}}</span>
            </md-item-template>
        </md-autocomplete>
        <button type="submit" ng-click="vm.querySearch(vm.searchText)">
            Search
        </button>
    </div>
</form>

...

<!-- Search Results -->
<md-list class="browser-list">
    <md-list-item ng-repeat="selected in vm.SearchResponse.Results"
                    ng-click="vm.selectItem(selected)">

        <catalogue-Summary ng-if="selected.Document.Catalogue" data="selected.Document" highlights="selected.Highlights" score="selected.Score" entity-name="'dataEntries'" show-in-list="true" class="full-width"></catalogue-Summary>
        <article-Summary ng-if="!selected.Document.Catalogue" data="selected.Document" highlights="selected.Highlights" score="selected.Score" entity-name="'contentEntries'" show-in-list="true" class="full-width"></article-Summary>
        <md-divider ng-if="!$last"></md-divider>
    </md-list-item>
</md-list>

因此，我想對md-autocomplete用於延遲建議請求的值進行去抖動，同時允許搜索按鈕用於立即訪問原始值的全文搜索查詢

Answer 1

在研究描述問題的好方法並添加對問題的引用時，我找到了2個解決方案

1. md-autocomplete文檔列出了專門針對這種情況設計的md-delay屬性，您希望模型立即綁定，但希望延遲搜索功能的調用

   md-delay
   [number] ：指定在尋找結果之前要等待的時間（以毫秒為單位）

   因此我們現在可以刪除model-options debounce語句，而改用md-delay：

    <md-autocomplete id="searchBox" ng-disabled="false" md-no-cache="true" md-search-text="vm.searchText" md-delay="300" md-selected-item-change="vm.selectedItemChange(item)" md-items="item in vm.querySuggester(vm.searchText)" md-item-text="item.Text" md-min-length="1" placeholder="Search articles..." layout-fill> <md-item-template> <span md-highlight-text="vm.searchText" md-highlight-flags="i">{{item.Text}}</span> </md-item-template> </md-autocomplete> 

2. 您還可以通過訪問html元素的第二個后代直接引用上述輸入字段的輸入值，這是因為上述代碼段將在運行時呈現為以下結構：（ 我從原始輸出中剝離了大多數屬性解釋這一點）

    <md-autocomplete> <md-autocomplete-wrap> <!-- ngIf: !floatingLabel --> <input name="" ng-model="$mdAutocompleteCtrl.scope.searchText"></input> <!-- end ngIf: !floatingLabel --> <!-- ngIf: $mdAutocompleteCtrl.scope.searchText && !$mdAutocompleteCtrl.isDisabled --> <!-- ngIf: $mdAutocompleteCtrl.loadingIsVisible() --> </md-autocomplete-wrap> <aria-status class="md-visually-hidden" role="status" aria-live="assertive"></aria-status> </md-autocomplete> 

   我們想直接訪問Input字段，因此以下腳本將使您能夠訪問該值，即使去抖動意味着該模型尚沒有該值也是如此：

    var searchInput = document.getElementById('searchBox').firstElementChild.firstElementChild; var value = searchInput.value; 

   在不了解md-autocomplete呈現方式的完整結構的情況下，但最終知道我們想要內部輸入控件，則以下嘗試將是更有用的嘗試：

    var searchInput = document.getElementById('searchBox').getElementsByTagName('input')[0];