Область действия директивы с областью ng-repeat в AngularJS

У меня есть директива с изолированной областью (чтобы я мог повторно использовать директиву в других местах), и когда я использую эту директиву с ng-repeat , она не работает.

Я прочитал всю документацию и ответы на Stack Overflow по этой теме и понимаю проблемы. Я считаю, что избежал всех обычных ошибок.

Итак, я понимаю, что мой код не работает из-за области, созданной ng-repeatдирективой. Моя собственная директива создает изолированную область и выполняет двустороннюю привязку данных к объекту в родительской области. Моя директива назначит новое значение объекта этой связанной переменной, и это отлично работает, когда моя директива используется без ng-repeat(родительская переменная обновляется правильно). Однако с ng-repeatприсваиванием создается новая переменная вng-repeat видимости, и родительская переменная не видит изменений. Все это, как и ожидалось, исходя из того, что я прочитал.

Я также читал, что когда есть несколько директив для данного элемента, создается только одна область. И что a priorityможет быть установлен в каждой директиве, чтобы определить порядок, в котором директивы применяются; директивы сортируются по приоритету, а затем вызываются их функции компиляции (ищите приоритет слова на http://docs.angularjs.org/guide/directive ).

Поэтому я надеялся, что смогу использовать приоритет, чтобы убедиться, что моя директива запускается первой и заканчивается созданием изолированной области, а при ng-repeatзапуске она повторно использует изолированную область вместо создания области, которая прототипически наследуется от родительской области. В ng-repeatдокументации указано, что эта директива работает с уровнем приоритета 1000. Неясно, 1является ли уровень приоритета более высоким или более низким. Когда я использовал уровень приоритета 1в своей директиве, это не имело значения, поэтому я попытался 2000. Но это усугубляет ситуацию: мои двусторонние привязки становятся, undefinedа моя директива ничего не отображает.

Я создал скрипку, чтобы показать свою проблему . Я закомментировал priorityнастройку в своей директиве. У меня есть список объектов имени и вызванная директива, name-rowкоторая показывает поля имени и фамилии в объекте имени. При щелчке отображаемого имени я хочу, чтобы оно установило selectedпеременную в основной области. Массив имен, selectedпеременная передаются в name-rowдирективу с помощью двусторонней привязки данных.

Я знаю, как заставить это работать, вызывая функции в основной области. Я также знаю, что если он selectedнаходится внутри другого объекта, и я привязываюсь к внешнему объекту, все будет работать. Но на данный момент меня эти решения не интересуют.

Вместо этого у меня есть следующие вопросы:

• Как мне предотвратить ng-repeatсоздание области, которая прототипически наследуется от родительской области, и вместо этого использовать мою область действия директивы?
• Почему уровень приоритета 2000в моей директиве не работает?
• Можно ли с помощью Батаранга узнать, какой тип прицела используется?

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

• 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 есть золотое правило: значения модели всегда должны содержать .в себе. То есть они никогда не должны быть примитивными. См. Этот SO-ответ для получения дополнительной информации.

Вот изображение того, как изначально выглядят прицелы.

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

Обратите внимание, что новое selectedсвойство было создано в области ngRepeat. Область действия контроллера 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 всегда должны иметь расширение ..

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

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, если вы проверите вкладку производительности, вы можете увидеть выражения, привязанные к каждой области, и проверить, соответствует ли это вашим ожиданиям.