Angularjs изолирует директиву области действия с помощью ng-repeat

Я пытаюсь использовать директиву для элементов ng-repeat, каждый из которых имеет изолированную область, но это не работает. Я просматриваю каждый элемент и окрашиваю его в красный цвет с помощью директивы inboxuser-select. Однако, когда я включаю директиву, она не показывает никаких значений моей области видимости. В чем проблема? Спасибо

HTML-файл

   <li class="inbox-chatter"  data-ng-    
        repeat="inboxuser in inboxusers">
        <p inboxuser-select selected={{inboxuser}}">{{inboxuser}}</p>
       </li>

директива.js

.directive('inboxuserSelect', function() {
return {
    restrict: 'A',
    scope: {
        selected: "@"
    },
    link: function(scope, element, attrs) {
   scope.selected.css('color','red');
    }

}
 });

javascript angularjs angularjs-directive angularjs-ng-repeat angularjs-scope
person user1424508    schedule 08.11.2013    source источник
comment
Что такое inboxuser. Если это объект JS, как вы можете использовать метод css   -  person Chandermani    schedule 08.11.2013
comment
Я упростил функцию для отображения. предположим, что inboxuser — это строка   -  person user1424508    schedule 08.11.2013

Ответы (2)


arrow_upward
3
arrow_downward

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

Один из вариантов — установить для scope значение true вместо использования изолированной области, чтобы вы унаследовали все от родительской области.

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

   template: '{{selected}}',

Кроме того, кстати, в вашем <p> отсутствует цитата. Так что это может работать лучше для вас (обратите внимание, я также удалил {{inboxuser}} из <p>, предполагая, что вместо этого вы будете использовать шаблон для его отображения):

  <p inboxuser-select selected="{{inboxuser}}"></p>
person KayakDave    schedule 08.11.2013

arrow_upward
0
arrow_downward

Честно говоря, я не понимаю, что вам действительно нужно делать, но у меня такое чувство, что этот дизайн вас не доставит.

Однако я исправил ваш пример только для того, чтобы объяснить, как все работает.

Вы можете посмотреть его вживую здесь.

Итак... когда вы пишете:

scope: {
    selected: "@"
}

на самом деле вы говорите, что моя изолированная область будет содержать одно свойство с именем selected, которое будет иметь тип string и будет содержать все, что оценивает {{inboxuser}}. И не только это, всякий раз, когда inboxuser изменяется во внешней области, selected также изменяется во внутренней, изолированной области. Вот как работает '@' привязка.

Все, что вы помещаете вложенным в <p inboxuser-select selected="{{inboxuser}}"></p>, привязывается к этой изолированной области, которая не имеет свойства inboxuser. Итак, он должен измениться на:

<p inboxuser-select selected="{{inboxuser}}">{{selected}}</p>

Наконец, scope.selected.css('color','red'); следует изменить на:

element.css('color','red');

Аргумент element в функции ссылки — это элемент DOM, к которому применяется экземпляр директивы. scope.selected это просто строка.

Я предлагаю вам изменить общий дизайн. Если вам нужна помощь, не стесняйтесь спрашивать.

Если вам это поможет, вы можете использовать AngScope, маленькое расширение Firebug, которое я написал. Это просто быстрый способ проверить $scope экземпляров, связанных с элементами DOM, в инспекторе DOM firebug.

person Kos Prov    schedule 08.11.2013
comment
Вы правы, я имел в виду неправильный дизайн. Чего я пытался добиться, так это щелкнуть элемент, вложенный в ngrepeat, а затем выделить его. Когда я нажимаю на другой элемент, этот элемент не выделяется, а следующий выделяется. Вот где я нашел ответ: stackoverflow.com/questions/19852722/ - person user1424508; 08.11.2013
comment
Да, я тоже видел этот вопрос. Старайтесь не публиковать полурабочий код, который никому не нужен. Четко определите свой вариант использования и всегда создавайте плунжер для работы с другими ребятами. - person Kos Prov; 08.11.2013