Angularjs数据绑定失败并提前进行了Angular UI-Bootstrap

Question

我有一个网站地址网址的表单字段，该网址使用ng-model数据绑定在页面上的其他地方进行显示（它只是显示该网址，例如“ http://thiswebsite.com ”）。 我还有另一个表单字段，我正在使用angular ui.bootstrap typeahead指令。 提前输入功能本身可以正常工作，但是，当提前输入功能被激活时（当我开始在提前输入字段中键入内容时），则网站地址显示变为超链接，并且数据绑定失败-这意味着如果我尝试在网站地址url字段中输入网址显示也不会更新。

仅表单中的typeahead字段会触发问题，并且仅表单中包含url的显示会受到影响。 我尝试将网址url输入字段的输入类型从'type =“ url”'更改为'type =“ text”'，但没有骰子。

我把一个jsfiddle放在一起，但是它不能重现这个问题，我想是因为我用较早的依赖版本进行了设置（该小提琴是使用ui.bootstrap 0.4.0和angular 1.0.7设置的）。 我这样设置小提琴，是因为当我尝试使用我使用的依赖项版本（角度1.3.3和ui.bootstrap 0.12.0）设置小提琴时，它根本无法工作（数据绑定和预输入）都彻底失败了）。 但是也许小提琴还是会有所帮助的。

相关代码：

HTML：

<div ng-controller="mainCtrl">
   <form role="form">
      <div class="form-group">
         <label>Website Address:</label>
         <input class="form-control" type="text" ng-model="provider.website">
      </div>
      <div class="form-group">
         <label>Service Types (ADD):</label>
         <input typeahead="service for service in allServiceTypesArray | filter:$viewValue | limitTo:8" typeahead-editable="false" typeahead-on-select="addServiceType($item, $model, $label)" ng-model="serviceTypeInput" class="form-control" type="text">
      </div>
   </form>
   <table id="provider-table">
      <tr>
         <td class="tableLabels">Website address display:</td>
         <td class="tableContents">{{provider.website}}</td>
      </tr>
      <tr>
         <td class="tableLabels">Provider Type(s):</td>
         <td class="tableContents">{{serviceTypesDisplay}}</td>
      </tr>
   </table>
</div>

JS：

angular.module('myApp', ['ui.bootstrap'])
.controller("mainCtrl", function ($scope) {

  $scope.allServiceTypesArray = [ "cleaning"
                                , "mop the floor"
                                , "answer the door"
                                , "superman no home" ]

  $scope.provider = {}

  clearProviderForm();

  function clearProviderForm() {
    $scope.provider.website = ''
    $scope.provider.serviceTypes = [];
    $scope.serviceTypesDisplay = '';
  }

  // add selected service types to array for "Service Types" input field
  $scope.addServiceType = function ($item, $model, $label) {
    $scope.provider.serviceTypes.push($model);
    $scope.provider.serviceTypes.sort();
    $scope.serviceTypeInput = '';
    $scope.serviceTypesDisplay = $scope.provider.serviceTypes.join(", ");
  };
});

我已经搜索过了，搜索了一下这个问题，并梳理了UI-Bootstrap github问题，但看来我是世界上唯一遇到这个问题的人（或者这是我做错的非常简单的事情！）。 它很可能只是版本不兼容的问题，但我想知道是否是这样，如果不是的话，也许有人知道解决方法甚至可以接受的解决方法。

当然，任何帮助将不胜感激。

Answer 1

得到它了！ 我不确定是什么引起了问题，但我找到了解决方案：

代替双花括号：

<td class="tableContents">{{provider.website}}</td>

使用ng-bind：

<td class="tableContents" ng-bind="provider.website"></td>

解决了问题。 网站地址仍显示为超链接，但在输入字段中键入数据时，数据绑定应按其应有的方式工作。