javascript - 为什么我的 ng-model 在 Firefox 中不使用 Typeahead 更新？

Question

在我用 AngularJS 构建的网站中我在下面有一个预先输入的输入，我使用 angular-typeahead .它在 Chrome、Opera 和 Safari 中运行良好，但在 Firefox 中运行不佳。问题似乎是，在 Firefox 中，当我单击预输入建议时，模型没有更新。

我的 html 看起来像这样:

<input class="typeahead" sf-typeahead type="text" datasets="userDataset" ng-model="searchUser" >
<button ng-click="sendToUser(searchUser.id)" class="btn">Send</button>

在我的 Controller 中我有这个简单的功能:

$scope.sendToUser = function(userId){
    console.log(userId);
    // More code here..
}

在 Chrome、Opera 和 Safari 中，它会为 userId 记录一个整数，但在 Firefox 中，它只会记录 undefined。

我做了一个plunker for it here显示我的意思(搜索“一个”或“两个”)。

它适用于 Chrome、Opera 和 Safari，但在 Firefox 中它以某种方式在控制台中显示 undefined。更奇怪的是它只在第一次显示 undefined 。如果您第二次选择某个内容，它就会起作用。

有谁知道为什么这在 Firefox 中不起作用，最重要的是，我该如何解决它？欢迎所有提示!

Answer 1

这是一个有趣的困境。

• TypeAhead 将 ng-model 值设置为选定的对象

• 在运行摘要循环的任何事件(如点击)上，框架强制执行 ng-model 绑定(bind)，为模型值分配一个绑定(bind)到输入的字符串。

• FireFox 与 Chrome 不同，它似乎强制执行此行为。 Chrome 输入可能允许对象值设置(只是一个猜测)。

---

解决方法是更改​​您的输出绑定(bind):

<input class="typeahead" sf-typeahead type="text"  datasets="userDataset" 
outputval="searchUser" ng-model="a" options="exampleOptions">

outputval 是我们的期望值。我绑定(bind)到一个随机范围变量 a 因为该指令需要并使用模型绑定(bind)。

在指令内，我更改了 updateScope 函数以将所选值设置为 scope.outputval 并注释掉对 Model 的赋值。

    function updateScope (object, suggestion, dataset) {
      scope.$apply(function () {
        var newViewValue = (angular.isDefined(scope.suggestionKey)) ?
            suggestion[scope.suggestionKey] : suggestion;
        console.log(newViewValue);    
        //ngModel.$setViewValue(newViewValue);
        scope.outputval = newViewValue;
      });
    }

试试我的 Plunker !