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

Question

在我使用AngularJS构建的网站中,我有一个输入,下面有一个类型,我使用angular-typeahead.它适用于Chrome,Opera和Safari,但不适用于Firefox.问题似乎是在Firefox中,当我点击typeahead建议时模型没有更新.

我的HTML看起来像这样:

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

在我的控制器中我有这个简单的功能:

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

在Chrome,Opera和Safari中,它会记录一个int userId,但在Firefox中它只是记录undefined.

我在这里做了一个plunker来表明我的意思(搜索"one"或"two").

它适用于Chrome,Opera和Safari,但在Firefox中它以某种方式显示undefined在控制台中.更奇怪的是它只是undefined第一次出现.如果你第二次选择它确实有效.

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

Answer 1

这是一个有趣的困境。

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

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

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

解决方法是更改​​输出绑定：

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

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

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

    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;
      });
    }

试试我的笨蛋！