Какую магию использует ngModel, которая не изменяет область видимости напрямую?

Question

Изучаю angularjs в данный момент, и я не совсем понимаю, как мне выполнить задачу, потому что я не до конца понимаю, что делает ngModel.

Если у меня есть директива с двумя переменными области видимости:

// An array of all my objects 
$scope.allMyObjects

// The currently selected object from the array
$scope.selectedObject

и в HTML

<span>{{ selectedObject.name }}</span>

<select id="select"
  ng-model="selectedObject"
  ng-options="object in allMyObjects">
</select>

Это все работает отлично, когда я выбираю объект из выбора, он обновляет selectedObject в области видимости и, следовательно, отображается имя выбранного в данный момент объекта.

Тем не менее, я не хочу поле выбора, вместо этого я хочу список всех моих объектов с редактируемым полем имени, с кнопкой выбора, которую я могу использовать, чтобы выбрать указанный объект, поэтому я придумал следующее:

<div ng-repeat="object in allMyObjects">
  <input class="object-name"
    ng-model="object.name">
    <a ng-click="loadObject(object)">Load</a>
</div>

и loadObject() функция по объему:

function loadObject(object) {
  $scope.selectedObject = object;
}

Тем не менее, это не работает. Я предположил, что это было в основном то, что ngModel делал за кулисами, но я явно сбит с толку. Может ли кто-то пролить свет или предложить лучшее решение для того, чего я хочу достичь?

Answer 1

После часа отладки возникла проблема с изолированной областью с помощью ng-repeat, проблема не обнаружилась ни в одном из упрощенных примеров jsfiddle, потому что они использовали чистый JS, и это был способ, которым я получал доступ к область действия через машинопись, которая вызвала проблему.

Спасибо за ответы, которые помогли мне сузить его до моего затруднения в понимании машинописного текста, а не в моих трудностях в понимании директив.

Answer 2

Пожалуйста, смотрите здесь: http://jsbin.com/jocane/1/edit?html,js,output

используйте ng-model="object.name" вместо "sc.name"

<div ng-repeat="object in allMyObjects">
  <input class="object-name"
    ng-model="object.name">
    <a ng-click="loadObject(object)">Load</a>
</div>