Данные беспорядок в Угловой директиве

Question

Я боролся с этой проблемой в течение нескольких дней.

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

Для простоты, я создал простой пример этого здесь: http://jsfiddle.net/hanspc/xxy4vh3v/

angular.module('vt.directives', []) 
    .directive('personType', [function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     scope: { 
      personType: '@' 
     }, 
     template: '<div class="{{pClass}}" style="height: 80px; width: 200px">Class: {{pClass}}<br>Type: {{personType}}</div>', 
     link: function (scope, elm, attrs) { 
      console.log(scope.personType); 
      scope.pClass = scope.personType == 'male' ? 'male-class' : 'female-class'; 
     } 
    }; 
}]); 

При нажатии на одну из кнопок дополнений, добавляет еще один человек в модели данных. Проблема в том, что директива не использует правильные значения данных. Если вы нажмете «Добавить Anne», данные будут выглядеть «вне» директивы, но не «внутри». Он должен возвращать правильное имя класса (и цвет) на основе данных, но добавленные самки показаны как синий (мужской).

И независимо от того, сколько или каких кнопок вы нажимаете, только первые два являются синими. Остальное - красное.

Любые идеи?

Благодаря

Answer 1

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

http://jsfiddle.net/kku170cm/

Вот трэк, который работает:

<div style="float: left; height: 140px; width: 200px; border: 1px solid #cccccc; margin-bottom: 20px;" ng-repeat="p in data.persons">