В AngularJS, как сделать изолированную область наследовать из области ng-repeat

Я пытаюсь создать настраиваемый компонент, который получает аргументы в цикле ng-repeat. Например, например, у меня есть компонент с именем "mycomp", который получает настраиваемый аргумент "name" в ng-repeat:

И в моей директиве изолированная область определяется следующим образом:

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

Как мне обойти эту проблему? Я что-то делаю неправильно?

Ответы

Ответ 1

Как я уже сказал в своем комментарии к исходному вопросу, на это уже был дан ответ. Во всяком случае, вот оно, подытожено:

В вашем шаблоне укажите модель, которую вы хотите унаследовать, без {{}} (поскольку использование скобок приводит к передаваемому значению, а не ссылку на саму модель):

<mycomp name="obj.name" ng-repeat="obj in list" />

И в вашей директиве установите двухстороннюю привязку, например:

scope:{name:"="}

EDIT:

Теперь я понимаю (после вашего комментария), что, хотя это решает вашу проблему, оно не полностью отвечает на вопрос. Здесь:

Когда вы создаете директиву, у вас есть выбор создания области, которая наследуется от ее родителя (обычно, хотя и не обязательно), или "изолированной" области, задавая соответственно scope: true или scope: {...}.

Итак, создавая unisolated scope, все родительские модели доступны (вы можете получить доступ к области scope.obj, созданной с помощью ng-repeat, но также и scope.list). Это удобно, но и опасно, конечно (и на самом деле не создает многоразовый код).

Если вы создадите изолированную область видимости, вы можете указать модели области видимости с помощью '@', '=' или '&'.

'@' и '&' оба производят изолированное, несвязанное значение (что, если вы меняете, изменяется только в изолированной области - в вашем случае объект в исходном списке вообще не имеет изменений), единственное отличие состоит в том, что '@' читает строку значение и '&' читает выражение. ЭТО ВАЖНО: причина, по которой я считаю, что ваш код не работал, был (только), потому что вы передали name="{obj.name}", а не name="{{obj.name}}", поскольку с '@' считывается строковое значение, и это строковое значение может имя obj, но вы должны включить его в {{}}!

Если вы используете '=', вы объявляете, что хотите, чтобы эта переменная была привязана к указанной внешней переменной. Итак, если (в припадке сумасшедшего, сумасшедшего гнева!) Вы хотите иметь 2 модели в своей директиве, которые запускаются с одинаковым значением, но on привязывается (т.е. изменения распространяются во внешнюю область), вы можете что-то сделать например:

<mycomp binded-name="obj.name" unbinded-name="{{obj.name}}" ng-repeat="obj in list" />

и в вашей директиве:

scope:{
  bindedName: "=",
  unbindedName: "@"
}