Упреждающая ng-модель Angular-UI Bootstrap не работает должным образом при размещении внутри вкладок

Я использую плагин angular-ui typeahead следующим образом:

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

когда я помещаю его в вкладки, следующие часы выражают прекращение работы:

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

Plunkr с примером моей проблемы находится здесь: http://plnkr.co/edit/65QrdX5DDA9YKenbEUbJ?p=preview

Я не думаю, что это ошибка, но подозреваю, что <uib-tabset> создает свою собственную область видимости, но я не знаю, как решить эту проблему.

ОБНОВЛЕНИЕ 1. Я решил эту проблему, используя область действия $parent следующим образом:

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

см. обновленный plunkr здесь: http://plnkr.co/edit/65QrdX5DDA9YKenbEUbJ?p=preview

Но он ищет для меня ужасное обходное решение, правильно ли решать эту проблему так, как я ее решил, а если нет, то как правильно?


angularjs angular-ui-bootstrap angular-ui angular-ui-typeahead
person Anatoly    schedule 28.12.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Дизайн, рассчитанный на будущее, всегда должен использовать .property в привязке 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. См. ссылку здесь, объясняющую, почему использование точки является хорошей практикой.

person Abide Masaraure    schedule 28.12.2015
comment
Спасибо за совет. $parent действительно некрасиво :-( - person stanleyxu2005; 29.12.2015

arrow_upward
3
arrow_downward

Это распространенная ошибка пользователей angular.

<input> в вашем случае фактически создает изолированную область. Вы хотите получить доступ к общей переменнойng-model=your_var, но на самом деле это частная переменная в области видимости <input>. Если директива содержит <ng-swtich>, она также создаст изолированную область.

К счастью, вы уже нашли решение. Да, вы бы использовали $parent.your_var (возможно, в некоторых случаях $parent.$parent) для настройки правильной привязки данных.

Кстати: вам может потребоваться установить расширение браузера angular, чтобы изучить иерархию области видимости angular.

person stanleyxu2005    schedule 28.12.2015