AngularJS Bootstrap UI Typeahead與自定義彈出模板無法正常工作

我正在開發一個.NET MVC應用程序，其中包含一些AngularJS頁面。我試圖使用Bootstrap UI Typeahead，但它工作不正常。AngularJS Bootstrap UI Typeahead與自定義彈出模板無法正常工作

如果我開始鍵入在自動完成彈出與潛在的匹配打開文本框：

但是，如果我點擊沒有任何反應，不更新底層的角模型的比賽之一：

真是個奇怪的事情是，如果我打標籤，而彈出是開放的第一場比賽將獲得選擇和角模型更新AP propriately：

這是我使用的模板：

<script type="text/ng-template" id="customTemplate.html"> 
<div class="search-result search-result--mos ng-scope" ng-if="matches.length > 0"> 
    <ul> 
     <li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match"> 
      <div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div> 
     </li> 
    </ul> 
</div>

這是相關前端代碼：

<section class="mos intro" data-ng-controller="MosConverterController as vm"> 
<div> 
<form ng-submit="GetCareers()" class="form form--mos"> 
      <div class="form__row"> 
       <div class="form__col form__col--half-plus"> 
        <label for="MOS" class="form__label">MOS/Rate/Duty Title</label>      
        <input type="text" ng-model="vm.model.SearchTerm" uib-typeahead="career.value for career in vm.model.CareerResults | filter:$viewValue | limitTo:8" typeahead-popup-template-url="customTemplate.html" id="MOS" class="form__input--text" placeholder="Start Typing" name="MOS" required> 

        <div>Current Search Term: {{vm.model.SearchTerm}}</div> 
        <textarea>{{vm.model.CareerResults}}</textarea> 
       </div> 
      </div> 
    </form> 
</div>

這裏是我們的角模型。請注意，我們在這個項目中使用的打字稿：

import {MosConverterSearchResult} from "../models"; 

export class MosConverterModel implements Object { 
    SearchTerm: string = null; 
    CareerResults: MosConverterSearchResult[]; 
    SelectedCareer: MosConverterSearchResult; 
}

我跟着從角引導文件here的教程節「爲預輸入的下拉彈出自定義模板」，但我想不出我有什麼做錯了。我確定這很簡單，但我無法弄清楚。我應該注意，在教程中添加ng-click到li元素就不能解決問題。我試着像這樣前：

 <li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match" ng-click="selectMatch($index)"> 
      <div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>     
     </li>

來源

2016-12-01 Bruno

敲我的頭靠在我的辦公桌上了幾個小時，我想通了，這個問題是在我的模板ng-if後。上面發佈的教程鏈接中的示例使用ng-show。 ng-if銷燬DOM元素並破壞其在過程中的範圍。這就是爲什麼當我點擊列表中的一個項目時什麼都不會發生。如果事實確實如此，我們不確定爲什麼這個標籤會起作用。如果有人知道請添加評論或更好的答案。

來源

2016-12-02 14:37:17 Bruno

AngularJS Bootstrap UI Typeahead與自定義彈出模板無法正常工作

回答

相關問題