AngularJS Bootstrap UI Typeahead无法正常使用自定义弹出模板

Question

我正在使用.NET MVC应用程序，其中包含一些AngularJS页面。我试图使用Bootstrap UI Typeahead，但它不能正常工作。

如果我开始输入文本框，则会打开自动完成弹出窗口，其中包含可能的匹配项：

但是，如果我点击其中一个匹配项，则不会发生任何事情，并且不会更新基础角度模型：

真正奇怪的是，如果我在弹出窗口打开时按Tab键，第一场比赛将被选中并且角度模型会更新：

这是我使用的模板：

<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>

这是我们的角度模型。请注意，我们在此项目中使用了Typescript：

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

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

我按照Angular Bootstrap文档here中的教程获取＆＃34;自定义弹出模板，用于输入＆＃39; s下拉＆＃34;部分，但我无法弄清楚我做错了什么。我确定它很简单，但我无法弄明白。我应该注意，将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>

Answer 1

在我的头撞到我的桌子几个小时之后，我发现问题是我的模板中的ng-if。我上面发布的教程链接中的示例使用ng-show。 ng-if销毁DOM元素并在此过程中销毁其范围。这就是为什么当我点击列表中的某个项目时不会发生任何事情的原因。虽然确实如此，但不确定为什么标签会起作用。如果有人知道请添加评论或更好的答案。