Директива изолирует область с областью ng-repeat в AngularJS

Ответ 1

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

• ngRepeat не влияет на выбранную область выделения.
• параметры, переданные в ngRepeat для использования в ваших атрибутах директивы, используют прототипически унаследованную область
• причина, по которой ваша директива не работает, не имеет ничего общего с областью выделения

Здесь приведен пример того же кода, но с удаленной директивой:

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

Вот JSFiddle, демонстрирующий, что это не сработает. Вы получаете те же результаты, что и в своей директиве.

Почему это не работает? Поскольку области в AngularJS используют прототипическое наследование. Значение selected в вашей родительской области - это примитив. В JavaScript это означает, что он будет перезаписан, когда ребенок устанавливает одно и то же значение. В области AngularJS есть золотое правило: в них всегда должны быть .. То есть, они никогда не должны быть примитивными. Подробнее см. этот ответ..

Ниже приведено изображение того, как выглядят области видимости.

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

Обратите внимание, что в области ngRepeat было создано новое свойство selected. Объем контроллера 003 не был изменен.

Вероятно, вы можете догадаться, что происходит, когда мы нажимаем на второй элемент:

Таким образом, ваша проблема на самом деле не вызвана ngRepeat - это вызвано нарушением золотого правила в AngularJS. Способ исправить это просто использовать свойство объекта:

$scope.state = { selected: undefined };

<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

Вот второй JSFiddle, показывая, что это тоже работает.

Ниже показаны области видимости:

После нажатия первого элемента:

Здесь, по желанию, влияет область управления.

Кроме того, чтобы доказать, что это все равно будет работать с вашей директивой с областью выделения (потому что, опять же, это не имеет ничего общего с вашей проблемой), вот JSFiddle для этого тоже представление должно отражать объект. Вы заметите, что единственным необходимым изменением было использование объекта вместо примитива.

Сфера применения:

Скоменты после нажатия на первый элемент:

В заключение: еще раз, ваша проблема связана не с областью изоляции, а с тем, как работает ngRepeat. Ваша проблема в том, что вы нарушаете правило, которое, как известно, приводит к этой самой проблеме. Модели в AngularJS всегда должны иметь ..

Ответ 2

Не пытаясь не отвечать на ваши вопросы, вместо этого взгляните на следующую скрипту:

http://jsfiddle.net/dVPLM/

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

В вашем шаблоне:

    <name-row 
        in-names-list="names"
        io-selected="selected">
    </name-row>

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

    template:
'        <ul>' +      
'            <li ng-repeat="name in inNamesList" ng-class="activeClass($index)" >' +
'                <a ng-click="setSelected($index)">' +
'                    {{$index}} - {{name.first}} {{name.last}}' +
'                </a>' +
'            </li>' +
'        </ul>'

В ответ на ваши вопросы:

• ng-repeat создаст область действия, вы действительно не должны пытаться ее изменить.
• Приоритет в директивах - это не просто порядок выполнения - см.: AngularJS: Как компилятор HTML упорядочивает порядок компиляции?
• В Batarang, если вы проверяете вкладку производительности, вы можете увидеть выражения, привязанные для каждой области, и проверить, соответствует ли это вашим ожиданиям.