Как получить доступ к выбранной опции из контроллера при нажатии кнопки в angularjs?

Question

У меня есть поле выбора с ng-model атрибут на вкладке в наборе вкладок ui-bootstrap.На вкладке также есть кнопка.При нажатии на кнопку я хотел бы получить выбранное значение в модели.Я пробовал использовать

<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick()">Click</button>

а затем в контроллере

$scope.buttonClick = function() {
  //try to access $scope.selectedOption
}

Но это, похоже, не содержит значения.Я попытался заглянуть в $scope переменная, и она, по-видимому, содержит selectedOption внутри чего-то, что называется $$childTail

Есть ли какой-либо другой способ получить доступ к значению selectedOption или я должен изменить структуру моего представления?

У меня есть Поршень здесь о том, что я пытаюсь сделать.

Answer 1

Ответы Мэтью Берга и человека-шмеля должны сработать, но они не объясняют, что происходит.

Ладно, в принципе, все происходит примерно так:

Директива tabset, которую вы используете, выполняет transclusion таким образом, selectedOption на самом деле находится во внутренней области (область tabset), а не в вашем TabsDemoCtrl cope. Этот ответ объясняет, что делает transclusion и как вы можете получить доступ к transcluded модели.

Transclusion создает неглубокие копии ваших моделей, так что даже если вы инициализируете выбранную опцию, например $scope.selectedOption = "5"; в вашем TabsDemoCtrl ваш select покажет 5, как было выбрано в начале, но изменения не будут отражены в области вашего контроллера TabsDemoCtrl, потому что в дочерней области набора вкладок 5 просто скопировано, а обновляемая область находится в области набора вкладок, а не в вашей области.

Вы также можете использовать объект для выбранной вами модели.Поскольку при преобразовании создается неглубокая копия, объекты/массивы/функции копируются по ссылке, а переменные копируются по значению.Это также причина, по которой вы можете получить доступ к кнопке TabsDemoCtrl, нажав на нее во внутренней области.

обновлен plnkr с помощью другого альтернативного решения (объектная версия) :

создал объект в вашем контроллере

$scope.selection = {};

и используется в модели, подобной этой

ng-model="selection.option"

http://plnkr.co/edit/5sI0arorV9dULzaDxRra?p=preview

Answer 2

Директива Angular ui tab/tabset создает новые области, поэтому для доступа к родительской области (что вы пытаетесь сделать) просто прикрепите $parent

<select name="selectedCampaign" ng-model="$parent.selectedOption" ng-options="option for option in options"></select>

Обновленный plunkr: http://plnkr.co/edit/BgMMn4tJRWm72ZXeQG3N

Answer 3

Редактировать:Прошу прощения, я неправильно понял вопрос, не могли бы вы просто сделать этот?

<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick(selectedOption)">Click</button>

$scope.buttonClick = function(selectedOption) {
  selectedOption.whatever...
}