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

未来验证设计总是在ng-model绑定中使用 .property 。就像@ 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 workaround。请参阅here链接，解释为什么使用圆点是一种很好的做法。

Answer 2

这是角度用户常见的陷阱。

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

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

BTW：您可能需要安装角度浏览器扩展来探索角度范围层次结构。