AngularJS: привязка данных к элементам массива не работает с массовым обновлением

Question

Желаемое поведение заключается в том, что я хочу динамически генерировать некоторые навигационные записи (некоторые <a> с) на основе данных, возвращаемых из бэкэнд. Поэтому я привязываю герцог и текст каждого <a> к полям элемента массива model. Как только обратный вызов возвращается, я назначаю возвращаемые данные data в model для обновления html. model и data используют одну и ту же структуру, но это не работает для меня.

Массив выглядит

 $scope.links = { 
        'cancelLink': 'http://cancelLink', 
        'Steps': [{ 
         'label': "Step1", 
         'link': "http://1" 
        }, { 
         'label': "Step2", 
         'link': "http://2" 
        }, { 
         'label': "Step3", 
         'link': "http://3", 
         'active': true 
        }, { 
         'label': "Review", 
         'link': "http://review" 
        }] 
        }; 

Обновление логики

$scope.loadLinks = function() { 
        $http({ 
         method: 'GET', 
         url: '/links' 
        }).success(function(data) { 
         $scope.links = data; 
        }); 
        }; 

HTML

<li><a class="text clickable" ng-href={{links.Steps[0].link}}>{{links.Steps[0].label}}</a></li> 
<li><a class="text clickable" ng-href={{links.Steps[1].link}}>{{links.Steps[1].label}}</a></li> 
... 

Приведенный выше код просто не смог молча, без выхода из консоли. Я попытался назначить по полю от date до link (links.Steps[0].link == data.Steps[0].link), и это работает. Так что, интересно, такое ли массовое обновление не поддерживается или что-то еще? Также мне интересно, как мне устранить эту проблему с ng-директивой в будущем?

Answer 1

Я поместил ваш код в Plnkr по адресу http://plnkr.co/edit/c5AOjyuLhBGqqugT4VU4?p=preview.

Один маленький стилистические изменения (хотя это не ломается в любом случае), вы должны обернуть нг-HREF значение в кавычки:

ng-href={{links.Steps[0].link}} 

должен быть

ng-href="{{links.Steps[0].link}}" 

Иначе, как вы можете видеть в Plnkr, он отлично работает. Я предполагаю, что ваша проблема заключается в том, что вызов $ http не загружает JSON, как вы ожидаете, $ scope в вашем контроллере недоступен для вашего HTML, или область $, которая устанавливается в функции загрузки, не то же самое область, к которой вы обращаетесь.

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

Answer 2

В первый раз, когда переплет был связан, он связал объект ссылки с вашим шаблоном.

Итак, если вы вносите изменения в один и тот же объект, это отражается. Однако, когда вы извлекаете ссылки с помощью функции loadLinks, вы создаете новый объект (с тем же именем). Никакие изменения не были внесены в исходный объект, который был связан.

Это нормальное ожидаемое поведение.

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

простой способ сделать это

links.length = 0 //empties the array 
//now append to links the data from server 
Array.prototype.push.apply(links,data); 

Или вы можете использовать любые библиотеки сахара, чтобы объединить массив, который фактически изменяет исходный массив