Question

我有一个网站地址网址的表单字段，可以使用ng-model数据绑定为页面上的其他位置提供显示（它只显示网址，例如＆＃34; http://thiswebsite.com＆＃34;）。我有另一个表单字段，我使用了角度ui.bootstrap typeahead指令。预先输入功能本身工作正常，但是当激活typeahead时（当我开始输入typeahead字段时），网站地址显示变成了超链接，它的数据绑定失败 - 这意味着如果我尝试输入网站地址网址字段再次显示网址显示不更新。

只有表单中的typeahead字段才会触发问题，并且只有包含url的表单中显示的显示才会受到影响。我尝试更改网站地址网址输入字段的输入类型来自＆＃39; type =＆＃34; url＆＃34;＆＃39; to＆＃39; type =＆＃34; text＆＃34;＆＃39;但没有骰子。

I put together a jsfiddle但它没有重现这个问题，我认为是因为我设置了较旧的依赖版本（小提琴设置为ui.bootstrap 0.4.0和angular 1.0.7）。我设置了这样的小提琴，因为当我尝试使用（角度1.3.3和ui.bootstrap 0.12.0）依赖版本设置小提琴时，它根本不起作用（数据） -binding和typeahead都彻底失败了）。但也许小提琴无论如何都会有所帮助。

相关代码：

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(", ");
  };
});

我已经搜索了SO，用Google搜索了这个，并梳理了UI-Bootstrap github问题，但看起来我是世界上唯一碰到这个问题的人（或者＃39）我做错了一些非常简单的事情！）。它可能只是一个版本不兼容的问题，但我想知道它不是，如果它可能是某人知道修复甚至是可接受的解决方法。

当然，我们将非常感谢任何帮助。

Answer 1

知道了！我不确定导致问题的原因，但我找到了一个解决方案：

而不是双花括号：

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

使用ng-bind：

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

解决了这个问题。网站地址仍显示为超链接，但数据绑定在输入字段中键入时应如此工作。

使用Angular UI-Bootstrap typeahead，Angularjs数据绑定失败

1 个答案: