Угловой нг-повтор не загружает изображения с сервера - всегда «в ожидании»

Question

Угловой нг-повтор не загружает изображения с сервера - всегда «в ожидании»

0

У меня есть следующий код с угловым v1.4.7

<img ng-repeat="x in modules" style="float:left" ng-src="{{moduleImagePath(x)}}"/>

Пути изображений создаются с помощью moduleImagePath (x). Эта функция в основном переключает изображение с хорошего состояния на образ состояния ошибки, к которому добавлено _ERR для имени изображения:

$scope.moduleImagePath= function(item)
        {
            var name = item.name
            if (item.idx === 0)
                name = 'Master'

            if (item.isLost === 1 || item.state != 'Op')
            {
                return 'img/' + name + '_ERR.jpg'
            }
            else
            {
                return 'img/' + name + '.jpg'
            }
        }

Когда отображается представление, таймер начинает опрос для обновления json, который содержит данные модулей. Обычно он находится на таймере 500 мс, однако для отладки я сделал это 10 секунд.

Изображения никогда не появляются на экране, хромовый инспектор утверждает, что изображения загружаются, но они никогда не запрашиваются на веб-сервере. Они остаются "ожидающими бесконечного срока:

Master.jpg  (pending)       Other   0 B Pending 
Master_ERR.jpg  (pending)       Other   0 B Pending 
EL1124.jpg  (pending)       Other   0 B Pending 
EL1124_ERR.jpg  (pending)       Other   0 B Pending 
EL4024.jpg  (pending)       Other   0 B Pending 
EL4024_ERR.jpg  (pending)       Other   0 B Pending 
EL2624.jpg  (pending)       Other   0 B Pending 
EL2624_ERR.jpg  (pending)       Other   0 B Pending 
EL4008_ERR.jpg  (pending)       Other   0 B Pending 
EL4008.jpg  (pending)       Other   0 B Pending

Веб-сервер - это mongoose, встроенный в программу на C, запущенную на localhost.

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

<div ng-if="x.name == 'Master' && x.isLost === 0"> <img src="img/Master.jpg"/></div>
<div ng-if="x.name == 'Master' && x.isLost === 1"> <img src="img/Master_Err.jpg"/></div>
<div ng-if="x.name == 'EK1100' && x.isLost === 0"> <img src="img/EK1100.jpg"/></div>
<div ng-if="x.name == 'EK1100' && x.isLost === 1"> <img src="img/EK1100_Err.jpg"/></div>
<div ng-if="x.name == 'EL1124' && x.isLost === 0"> <img src="img/EL1124.jpg"/></div>
<div ng-if="x.name == 'EL1124' && x.isLost === 1"> <img src="img/EL1124_Err.jpg"/></div>
<div ng-if="x.name == 'EL2624' && x.isLost === 0"> <img src="img/EL2624.jpg"/></div>
<div ng-if="x.name == 'EL2624' && x.isLost === 1"> <img src="img/EL2624_Err.jpg"/></div>
<div ng-if="x.name == 'EL4008' && x.isLost === 0"> <img src="img/EL4008.jpg"/></div>
<div ng-if="x.name == 'EL4008' && x.isLost === 1"> <img src="img/EL4008_Err.jpg"/></div>
<div ng-if="x.name == 'EL4024' && x.isLost === 0"> <img src="img/EL4024.jpg"/></div>
<div ng-if="x.name == 'EL4024' && x.isLost === 1"> <img src="img/EL4024_Err.jpg"/></div>

Кажется, что ресурсы должны быть предварительно загружены, прежде чем я могу их переключить. Должно ли это выполняться с помощью CSS или другого метода?

Meh Frustrated 02 окт. 2015, в 04:23

Источник

Теги:

angularjs

image

angularjs-ng-repeat

ng-repeat

1 ответ

Ещё вопросы

maddygoround · Answer 1 · 2015-10-02T00-42-00.000Z

Я не вижу никаких проблем с вашим кодом angularjs. Но вы просто для решения своей проблемы можете попробовать таким образом.

создайте ng-switch только для x.isLost (я знаю, что это просто bool.still, я предпочитаю использовать ng-switch вместо ng-if)

  <div  ng-switch on="x.isLost">
           <img src="img/{{x.name}}.jpg" ng-switch-when="0"/>
           <img src="img/{{x.name}}_ERR.jpg" ng-switch-when="1"/>
  </div>

И просто чтобы проверить, используете ли вы свою веб-страницу через localhost или ваш ipaddress? иногда, когда я пытаюсь получить доступ к моей веб-странице, используя мой IP-адрес, я сталкиваюсь с такими проблемами.