IE 11的位置 </img> 使用Cloudinary AngularJS指令在DOM中添加標簽

Question

我正在使用官方的Cloudinary AngularJS指令在我的網站上放置圖片。 但是，Chrome和IE 11在放置結束標記</img>方面的行為有所不同。 IE會將其放置在父元素關閉之前，而Chrome則會將其正確放置在被包含元素之后。

以下是相關Cloudinary指令的摘錄（來自其官方插件）：

angularModule.directive('clTransformation', function() {
  return {
    restrict : 'E',
    transclude : false,
    require: '^clImage',
    link : function (scope, element, attrs, clImageCtrl) {
      var attributes = {};
      $.each(attrs, function(name,value){
        if (name[0] !== '$') {
          attributes[cloudinaryAttr(name)] = value;
        }
      });
      clImageCtrl.addTransformation(attributes);
    }
  }
});

angularModule.directive('clImage', function() {
  return {
    restrict : 'E',
    replace: true,
    transclude : true,
    template: "<img ng-transclude/>",
    scope: {},
    priority: 99,
    controller: function($scope) {
      this.addTransformation = function(ts){
        $scope.transformations = $scope.transformations || [];
        $scope.transformations.push(ts);
      }
    },
...

我已經在我的網站中實現了這些功能：

<figure>
  <cl-image
    ng-repeat='image in images'
    public_id='{{image.public_id}}'
    format='jpg'>
      <cl-transformation
        height='{{imgHeight}}'
        width='{{imgWidth}}'
        crop='{{crop}}'>
  </cl-image>
  <a href='' ...></a>
  <a href='' ...'></a>
  <div class='nav'>
    <div class='wrapper'>
      <ul>
        <li>
          <a href='' ...></a>
        </li>
        ...
      </ul>
    </div>
  </div>
  <figcaption><{{description}}></figcaption>
</figure>

---

在Chrome中打開網站，DOM更新為

<figure>
  <img ng-transclude="" public_id="wide/image1" format="jpg" src="http://res.cloudinary.com/<account id>/image/upload/c_fill,h_370,w_1130/v1/wide/image1.jpg">
    <cl-transformation height="370" width="1130" crop="fill" class="ng-scope">
    </cl-transformation>
  </img>   <!---------------- img close tag is here ---------------------->
  <img ...>
    ...
  </img>
  <a href='' ...></a>
  <a href='' ...></a>
  ...
</figure>

但是， 在IE中 ，DOM更新為：

<figure>
  <img ng-transclude="" public_id="wide/image1" format="jpg" src="http://res.cloudinary.com/<account id>/image/upload/a_exif,c_fill,g_center,h_370,w_1130/v1/wide/image1.jpg">
    <cl-transformation height="370" width="1130" crop="fill" class="ng-scope">
    </cl-transformation>
  <a href='' ...></a>
  <a href='' ...></a>
    <div class='nav'>
      <div class='wrapper'>
        <ul>
          <li>
            <a href='' ...></a>
          </li>
          ...
        </ul>
      </div>
    </div>
    <figcaption><{{description}}></figcaption>
  </img>   <!---------------- img close tag is here :( ---------------------->
  <img ...>
     ...
  </img>
</figure>

這將導致所有<a> ， <div> ， <ul> ， <li>和<figcaption>標簽都無法呈現。

我嘗試將clImage指令更改為使用<img ng-transclude></img>類的模板，但得到的結果相同。 IE中的</img>標記發生了什么，該如何解決？

Answer 1

對於像您展示的那樣的非鏈式轉換，應該將轉換參數放在image標簽本身上可以解決問題。 在這種情況下：

<cl-image
  ng-repeat='image in images'
  public_id='{{image.public_id}}'
  height='{{imgHeight}}'
  width='{{imgWidth}}'
  crop='{{crop}}'
  format='jpg'>

如果您需要鏈式轉換，並且希望避免使用內部轉換標簽，則可以在cl-image標記上使用raw-transformation屬性：

<cl-image
  ng-repeat='image in images'
  public_id='{{image.public_id}}'
  raw-transformation='c_crop,h_100,w_150/a_45'
  format='jpg'>

上面的示例在之前發現的裁剪轉換的頂部鏈接了另一個45度旋轉。

在示例項目中查看各種圖像標簽示例。