typeahead-template-url 导致页面要求提供凭据

Question

我有这个 Anuglar.js UI-Boostrap 问题。我正在尝试使用 ui-bootstrap 设置自定义弹出模板。但是，每当页面加载时，我都会弹出一个窗口，要求我再次输入我的凭据。它们在页面上没有错误，并且没有任何内容无法通过网络加载。如果我尝试登录，它会说它不正确，如果我取消它，它会让我退出我的应用程序。

我慢慢开始注释掉我添加的代码的不同部分，发现当我注释掉 ui-bootstrap 属性时，它不再要求提供凭据 下面是以下代码，其中 ui-boostrap 被注释掉了。

<input type="text"  @*typeahead-popup-template-url="customPopupTemplate"*@ typeahead-min-length="0" typeahead-show-hint="false" uib-typeahead="d as d.name for d in bds | filter:{name:$viewValue,isDeleted:false}" typeahead-on-select="getStuffs($item)" ng-model="item.bd" ng-required="true" />

customPopupTemplate 下面来自 angulars 网站（向下滚动到 typeahead）

http://angular-ui.github.io/bootstrap/

我最初做了网站逐字记录的操作，但仍然弹出，所以我将附加标记放在部分中，然后将部分加载到页面上，但仍然遇到相同的问题。我正在尝试显示自定义弹出窗口，但无法通过要求凭据的网站。我在这里有点迷路，不知道该去哪里。任何帮助将不胜感激。

<div class="col-md-12" id="customPopupTemplate">
    <div class="custom-popup-wrapper"
         ng-style="{top: position().top+'px', left: position().left+'px'}"
         style="display: block;"
         ng-show="isOpen() && !moveInProgress"
         aria-hidden="{{!isOpen()}}"

         >
        <p class="message">select location from drop down.</p>
        <ul class="dropdown-menu" role="listbox">
            <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
                image-checkbox ng-style="{'background-color':bgCol}" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
                <div uib-typeahead-match index="$index" match="match" query="query" ng-style="{background-color:match.color" template-url="templateUrl"></div>
            </li>
        </ul>
    </div>
</div>

Answer 1

在页面加载时提示输入此类凭据通常是由 Web 服务器配置引起的。我的猜测是您使用的是 IIS，并且网站上启用了 Windows 身份验证，它需要您的本地 Windows 用户凭据。

尝试在 IIS 中禁用 Windows 身份验证并启用匿名，看看是否得到相同的结果。

Answer 2

假设您使用的是 ASP.Net mvc，您可能需要添加一个 web.config 文件来存储您的 customPopupTemplate。首先，我建议重命名为

customPopupTemplate.cshtml。然后需要在这些模板文件所在的项目区域添加一个web.config文件。像这样的：

<?xml version="1.0"?>

<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=" requirePermission="false" />
    </sectionGroup>
  </configSections>

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

  <appSettings>
    <add key="webpages:Enabled" value="false" />
  </appSettings>

  <system.webServer>
    <handlers>
      <remove name="BlockViewHandler"/>
      <add name="BlockViewHandler" path="*.cshtml" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
    </handlers>
  </system.webServer>

  <system.web>
    <compilation>
      <assemblies>
        <add assembly="System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=" />
      </assemblies>
    </compilation>
  </system.web>
</configuration>

关键是system.webServer 中的这个部分。它基本上允许应用程序提供.cshtml 文件：

<handlers>
          <remove name="BlockViewHandler"/>
          <add name="BlockViewHandler" path="*.cshtml" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
</handlers>