Angular-UI Bootstrap 的 typeahead ngmodel 放在选项卡内时无法按预期工作

Question

我正在使用 angular-ui typeahead 插件如下：

<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

当我把它放在tabs下面的表中表示停止工作时：

$scope.$watch('selected', function(){
    console.log($scope.selected);
  });

我不认为这是一个错误，但怀疑 <uib-tabset> 创建了自己的范围，但我不知道如何解决这个问题。

UPDATE1：我已经通过使用 $parent 范围解决了这个问题，如下所示：

ng-model="$parent.$parent.selected"

但它寻找我糟糕的解决方法，以我已经解决的方式解决这个问题是否正确，如果不正确，什么是正确的方法？

Answer 1

这是 angular 用户的一个常见陷阱。

您的 <input> 实际上创建了一个独立的范围。你想访问一个共享变量ng-model=your_var，但它实际上是<input>范围内的一个私有变量。如果一个指令包含 <ng-swtich>，它也会创建一个独立的范围。

幸运的是您已经找到了解决方案。是的，您会使用 $parent.your_var（在某些情况下可能 $parent.$parent）来设置正确的数据绑定。

顺便说一句：您可能需要安装 angular 浏览器扩展来浏览 angular 范围层次结构。

Answer 2

面向未来的设计总是在 ng-model 绑定中使用 .属性。就像 @Stanelyxu2005 和你自己已经发现的那样，正在创建一个隔离范围。通过创建这样的范围变量

JS

$scope.selected = {city:"" };
$scope.$watch('selected.city', function(){
console.log($scope.selected.city);
});

标记

<input type="text" ng-model="selected.city" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

将确保原型链保持真实且永不损坏。这将是比使用丑陋的 $parent.$parent 解决方法更好的方法。看到一个linkhere explaining why using the dot is good practice.

Angular-UI Bootstrap's typeahead ng-model doens't work as expected when placed inside tabs