Почему не получается получить значение инпута в контроллере?

Question

[beduin01]

Пожалуйста подскажите почему значение инпута не передается в контроллер. Все делаю вроде бы правильно. Перепроверил все 10 раз, перечитал документацию. В тестовом примере все окей, а в рабочем ничего не работает.
Сам проект загрузил сюда нужно нажать на пункт "Другое", откроется текст инпут. После ввода туда значения и нажатия кнопки "test", в консоли браузера пишется "undefined". В чем может быть причина?

<div ng-show=" {{answer.id }} === 6 && showTextBox_1"> <!-- div for text-box -->
                           <div >
                            <input type="text" style="width:50%;" class="form-control" placeholder="Введите текст" ng-model="textboxValue_1"/>
                           </div>
                            <button ng-click="go()">
                            test
                            </button>
                        </div>

В самом question.js (прям вверху) написано:

$scope.textboxValue_1;

        $scope.go = function() {
          console.log($scope.textboxValue_1);
        }

Вроде бы должно работать, но нет...

Answer 1

[lega]

Директивы которые удаляют DOM (ng-if, ng-include, ng-repeat и т.п.) создают дочерний Scope с прототипом на ваши данные. Поэтому если вы будете записывать в корень дочернего scope, например scope.textboxValue_1 = "...", то эта переменная не будет доступна из вашего scope, т.к. значение поменялось в дочернем, а не в вашем. Что и происходит в вашем случае.
Поэтому рекомендуют использовать controllerAs, либо хранить данные в объекте "myModel.textboxValue_1", т.к. myModel будет ссылаться на один объект из вашего и дочернего scope.

В последнем Angular Light и Angular 2 такой проблемы нет.

Answer 2

[Даша Циклаури]

$scope.myModel = {
textboxValue_1:null
};

ng-model="myModel.textboxValue_1"

так будет работать!

Comments

[beduin01]

Так, а почему как у меня не работает?

[Даша Циклаури]

если ты работаешь с ng-model обращаться нужно через точечную нотацию, такая надобность возникает из-за наследования контекстов, кратко говоря там имена конфликтуют...

в этом видео подробнее:
https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s

[Сергей Протько]

Даша Циклаури: вы точно уверены в том что говорите?

[Сергей Протько]

Даша Циклаури: ну мол ваше видео про скоупы джаваскрипта а человеку надо про прототипное наследование (на котором реализовано наследование скоупов ангуляра)

Answer 3

[Сергей Протько]

Почитайте:
https://github.com/angular/angular.js/wiki/Underst...

tl/dr

Это связано с реализацией наследования скоупов в angularjs. Наследование организуется через прототипы объектов, а в этом случае наследуются только ссылки. В вашем случает ng-model записывает результат в свой скоуп и из родительского скоупа мы не можем его прочитать.

Как правило директивы создают свои скоупы (но не всегда), в том числе и ng-model. Потому этот момент стоит учитывать.

Самым простым решением, которое не будет выглядеть как кастыль, является controllerAs синтаксис который появился в angular 1.2. То есть ваш контроллер будет выглядеть так:

function MyController() {
    var vm = this;
    this.textBoxValue = 'test';
}

<div ng-controller="MyController as myCtrl">
    <input type="text" ng-model="myCtrl.textBoxValue" />
</div>

вы сразу же получаете дополнительные бонусы в виде разделения пространства имен контроллеров. Ну и по сути хорошим правилом будет не использовать $scope вообще. Единственное место где его можно использовать - link директивы и это относительно редкий случай.

Ну и почитайте про компонентный подход построения приложений для ангуляра. В частности: никаких независимых контроллеров, все разбивается чисто на директивы (в том число и все приложение будет одной большой директивой-компонентом).