angularjs - 将Angular-UI bootstrap 提前键入ng-model放在选项卡中时无法按预期工作

我正在使用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);
  });

带有我问题示例的Plunkr在这里：http://plnkr.co/edit/65QrdX5DDA9YKenbEUbJ?p=preview

我不认为这是一个错误，但是怀疑会创建自己的作用域，但我不知道如何解决此问题。

UPDATE1：我已经通过使用<uib-tabset>范围解决了此问题，如下所示：

$parent

在此处查看更新的plunkr：http://plnkr.co/edit/65QrdX5DDA9YKenbEUbJ?p=preview

但这看起来是我一个可怕的解决方法，以我已经解决的方式解决此问题是否正确，如果没有，正确的方法是什么？

最佳答案

未来的证明设计总是在ng模型绑定中使用.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解决方法更好。请参阅链接here，以解释为什么使用点是一种很好的做法。

关于angularjs - 将Angular-UI bootstrap 提前键入ng-model放在选项卡中时无法按预期工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34497157/