2017-01-27 2 views
0

나는 Anugular 1.5에서 SPA를 개발 중입니다. 나는 IE11에서 매우 나쁜 버그를 가지고있다. 그것은 내 그림을 오른쪽으로 렌더링하지 않고 대신 검정색 상자에 흰색 X를 표시합니다. 무엇이 가장 흥미롭고, 브라우저가 요청시 200 개의 코드 응답을 얻습니다. img. 문제 HTML 코드와 화면을 첨부 IE 11 대신 흰색 X 렌더링 이미지

function NewsController($rootScope, $scope, $rest, $translate, $sideFilterMenuItems, $languages, $utils) { 
 
    var $ctrl = this; 
 
    $ctrl.sideFilterMenuItems = $sideFilterMenuItems; 
 
    $ctrl.languages = $languages; 
 
    $ctrl.news = []; 
 
    $ctrl.tags = []; 
 
    $ctrl.tagsSearchString = undefined; 
 
    $ctrl.validDatePicker = true; 
 
    $ctrl.readNews = false; 
 
    $ctrl.unreadNews = false; 
 
    $ctrl.newsLoading = false; 
 
    $ctrl.noResults = false; 
 
    $ctrl.error = undefined; 
 
    $ctrl.filters = { 
 
     pageNumber: 1, 
 
     searchStrings: undefined, 
 
     filterType: undefined, 
 
     language: undefined, 
 
     dateFrom: undefined, 
 
     dateTo: undefined, 
 
     read: undefined 
 
    }; 
 

 
    getNews(); 
 

 
    $ctrl.getNews = getNews; 
 

 
    $scope.$on('event.common.bottomReached', function() { 
 
     getNews(); 
 
    }); 
 

 
    $ctrl.getNewsTags = function (searchString) { 
 
     if (searchString.length >= 3) { 
 
     $rootScope.silent = true; 
 
     return $rest.getNewsTags({ 
 
      searchString: searchString 
 
     }).$promise.then(function (response) { 
 
      if (!_.isEmpty(response.tags)) { 
 
      _.each(response.tags, function (tag) { 
 
       tag.translation = $translate; 
 
       $translate('news.' + tag.text).then(function (translation) { 
 
       tag.translation = translation; 
 
       }); 
 
      }); 
 
      return response.tags; 
 
      } 
 
      return []; 
 
     }, angular.noop); 
 
     } 
 
    }; 
 

 
    $ctrl.fillInTags = function (tag) { 
 
     if (!_.includes(_.map($ctrl.tags, 'code'), tag.code)) { 
 
     $ctrl.tags.push(tag); 
 
     } 
 
     $ctrl.tagsSearchString = undefined; 
 
     $scope.$digest(); 
 
    }; 
 

 
    $ctrl.resetFilters = function() { 
 
     $ctrl.tags = []; 
 
     $ctrl.tagsSearchString = undefined; 
 
     _.each($ctrl.filters, function (fval, fkey) { 
 
     switch (fkey) { 
 
      case 'filterType': 
 
      break; 
 
      case 'pageNumber': 
 
      $ctrl.filters.pageNumber = 1; 
 
      break; 
 
      default: 
 
      $ctrl.filters[fkey] = undefined; 
 
      break; 
 
     } 
 
     }); 
 
     _.each($languages, function (language) { 
 
     language.active = false; 
 
     }); 
 
     $languages[0].active = true; 
 
     $ctrl.news = []; 
 
     $ctrl.readNews = false; 
 
     $ctrl.unreadNews = false; 
 
     getNews(); 
 
    }; 
 

 
    $ctrl.getLongDescription = function (item) { 
 
     var longDescriptionContainer = $('#' + item.newsId + '_LongDescription'); 
 
     longDescriptionContainer.html($ctrl.getPartContent(item.content)); 
 
    }; 
 

 
    $ctrl.getPartContent = function (part) { 
 
     var currentLang = $translate.use(); 
 
     if (_.isEmpty(part[currentLang])) { 
 
     switch (currentLang) { 
 
      case 'en': 
 
      return part.ru; 
 
      case 'ru': 
 
      return part.en; 
 
      default: 
 
      return ''; 
 
     } 
 
     } else { 
 
     return part[currentLang]; 
 
     } 
 
    }; 
 

 
    function getNews(force) { 
 
     $ctrl.newsLoading = true; 
 
     $ctrl.noResults = false; 
 
     $ctrl.error = undefined; 
 
     $ctrl.filters.dateFrom = $utils.isValidDate($ctrl.filters.dateFrom) ? moment($ctrl.filters.dateFrom).format('YYYY-MM-DD') : undefined; 
 
     $ctrl.filters.dateTo = $utils.isValidDate($ctrl.filters.dateTo) ? moment($ctrl.filters.dateTo).format('YYYY-MM-DD') : undefined; 
 
     $ctrl.filters.read = (($ctrl.readNews && $ctrl.unreadNews) || (!$ctrl.readNews && !$ctrl.unreadNews)) ? undefined : $ctrl.readNews; 
 

 
     var searchStrings = _.map($ctrl.tags, 'synonymString'); 
 
     if (!_.isEmpty($ctrl.tagsSearchString)) searchStrings.push($ctrl.tagsSearchString); 
 
     $ctrl.filters.searchStrings = _.join(searchStrings, ',') || undefined; 
 

 
     if (force) { 
 
     $ctrl.news = []; 
 
     $ctrl.filters.pageNumber = 1; 
 
     } 
 

 
     $rest.getNews($ctrl.filters).$promise.then(
 
     function (data) { 
 
      if (!_.isEmpty(data.items)) { 
 
      $ctrl.news = _.concat($ctrl.news, data.items); 
 
      $ctrl.filters.pageNumber++; 
 
      } 
 
      $ctrl.noResults = _.isEmpty($ctrl.news); 
 
      $ctrl.newsLoading = false; 
 
     }, 
 
     function (response) { 
 
      $ctrl.error = response.data.code || 'error.unknownError'; 
 
     } 
 
    ); 
 
    } 
 
    }
<div class="item" ng-class="{read: item.read}" ng-repeat="item in $ctrl.news"> 
 
     <div class="header-row unselectable"> 
 
      <div class="date">{{ item.publicationDate | date: 'shortDate' }}</div> 
 
      <div class="type">{{ 'news.' + item.group.text | translate }}</div> 
 
      <div class="favorite" ng-click="$ctrl.markNewsAsFavorite(item)"> 
 
      <i ng-if="item.favorite" class="fa fa-star selected"></i> 
 
      <i ng-if="!item.favorite" class="fa fa-star-o"></i> 
 
      </div> 
 
     </div> 
 
     <div class="topic-row">{{ $ctrl.getPartContent(item.topic) }}</div> 
 
     <div class="tags-row unselectable" ng-if="item.tags.length > 0"> 
 
      <div class="newstag" ng-repeat="tag in item.tags">{{ 'news.' + tag.text | translate }}</div> 
 
     </div> 
 
     <div class="content-row row"> 
 
      <div class="col-xs-3 col-md-3 image unselectable" ng-if="item.imageId"> 
 
      <img ng-src="/portal/api/private/image?imageId={{ item.imageId }}"> 
 
      </div> 
 
      <div id="{{ item.newsId }}_ShortDescription" ng-if="!item.expanded" class="description"> 
 
      {{ $ctrl.getPartContent(item.description) }} 
 
      </div> 
 
      <div id="{{ item.newsId }}_LongDescription" ng-if="item.expanded" class="description"> 
 
      {{ $ctrl.getLongDescription(item) }} 
 
      </div> 
 
      <div class="read-more link unselectable"> 
 
     <span ng-click="$ctrl.markNewsAsRead(item)"> 
 
      {{ item.expanded ? 'news.read_less' : 'news.read_more' | translate }} 
 
     </span> 
 
      </div> 
 
     </div> 
 
     </div>

red squares are the places where img should be

+0

과 노력 (당신은 [이 문제]를 가진 유일한 사람이있어 보인다해야 http://stackoverflow.com/questions/39000915/using-angularjs-and-ie11-image-not-updating-upon-updating-the-ng-src-attribute) - wh $ scope를 강제하면 at가 발생합니다. 소스가 업데이트 된 후 $ timeout에 적용됩니다. 아무것도? 아니면 깨진 채로 남아 있습니까? –

+0

계속 남았습니다 ( – proJS

답변

0

<img src="/portal/api/private/image?imageId={{ item.imageId }}"> 
+0

예, 시도했습니다. 작동하지 않습니다. ( – proJS

+0

다른 브라우저에서 작동합니까? –

+0

예, 다른 브라우저는 정상입니다.이 링크/portal/api/private로 이동하면 – proJS