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

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

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

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

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

и в хтмл

<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 делает за кулисами, но я явно сбит с толку. Кто-нибудь может пролить свет или предложить лучшее решение того, чего я хочу достичь?


angularjs angular-ngmodel
person ptr    schedule 25.07.2014    source источник
comment
Можете ли вы показать полный образец? Сейчас это выглядит следующим образом: loadObject не определяется как свойство $scope и, таким образом, никуда не ведет, когда директива ng-click пытается выполнить строку loadObject(object). Это ваша проблема?   -  person Philipp Gayret    schedule 25.07.2014
comment
Извините за это, нет, я не верю, что это так. Проблема в том, что я использую машинописный текст, поэтому мне сложно преобразовать его в обычные полные примеры js, у меня есть $scope.loadObject = loadObject в другом месте, а console.log() внутри функции показывает, что она вызывается.   -  person ptr    schedule 25.07.2014
comment
Я сделал JSFiddle, который делает то, что вы ищете, я думаю, если вы можете попробовать загрузить полный образец где-то   -  person Philipp Gayret    schedule 25.07.2014
comment
Спасибо, Филипп, проблема в том, что и ваш пример, и @sylwester используют контроллер (может быть, это способ сделать это, я не знаю), тогда как я сейчас работаю над директивой и HTML, который я пишу находится в html-шаблоне директивы.   -  person ptr    schedule 25.07.2014
comment
Я не вижу причин, по которым то, что я сделал, не должно работать, поскольку оно идентично тому, что у вас есть во всех остальных смыслах.   -  person ptr    schedule 25.07.2014
comment
Если вы не покажете свой полный код, я тоже не знаю - опубликованный образец и то, что вы пытаетесь сделать, должны отлично работать из директивы.   -  person Philipp Gayret    schedule 25.07.2014
comment
Давайте продолжим обсуждение в чате.   -  person Philipp Gayret    schedule 25.07.2014

Ответы (2)


arrow_upward
0
arrow_downward

См. здесь: 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>
person sylwester    schedule 25.07.2014
comment
извините, это опечатка из-за копирования и вставки - person ptr; 25.07.2014

arrow_upward
0
arrow_downward

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

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

person ptr    schedule 25.07.2014