AngularJS Bootstrap UI Typeahead 无法与自定义弹出模板一起正常工作答案

【问题标题】：AngularJS Bootstrap UI Typeahead Not Working Properly with Custom Popup TemplateAngularJS Bootstrap UI Typeahead 无法与自定义弹出模板一起正常工作
【发布时间】：2017-04-16 12:36:53
【问题描述】：

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

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

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

真正奇怪的是，如果我在弹出窗口打开时点击选项卡，第一个匹配项将被选中，并且角度模型会适当更新：

这是我正在使用的模板：

<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 中的“用于预先输入的下拉菜单的自定义弹出模板”部分的教程进行操作，但我不知道我做错了什么。我确定这很简单，但我就是想不通。我应该注意，像教程中那样将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>

【问题讨论】：

标签： angularjs asp.net-mvc typescript angular-ui-bootstrap angular-ui-typeahead

【解决方案1】：

在我的头撞在桌子上几个小时后，我发现问题出在模板中的 ng-if 上。我在上面发布的教程链接中的示例使用ng-show。 ng-if 破坏 DOM 元素并破坏其在进程中的作用域。这就是为什么当我单击列表中的一个项目时什么都不会发生的原因。不知道如果确实如此，为什么制表符会起作用。如果有人知道，请添加评论或更好的答案。

【讨论】：