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>

解決了問題。 網站地址仍顯示為超鏈接，但在輸入字段中鍵入數據時，數據綁定應按其應有的方式工作。