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>

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

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

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

我制作了plunker for it here来表明我的意思（搜索＆＃34;一个＆＃34;或＆＃34;两个＆＃34;）。

它适用于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，并将指派注释掉为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 ！

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

1 个答案: